test API with mock function

此篇有使用 isomorphic-fetch Library

此篇要call的API為 https://facebook.github.io/react-native/movies.json

1.fetch api

新建 root/app/api/users.js 使用此class 將call我們要的API寫成一個function

class Users {
  static all() {
    return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => {
      if(response) {
          return response.json();
      }
    });
  }
}

export default Users;

2.call fetch

在 root/app/Home.js 內 call 步驟1所寫的function

import React, { Component } from 'react';
import { StyleSheet, View, TextInput } from 'react-native';
import Users from './api/users';

export default class Home extends Component {

  componentDidMount() {
    Users.all().then((data)=> {
      console.warn("check api data", data);
    });
  }

  render() {
    return (
      <View style={styles.wrapper}>
        <TextInput
          testID={'username'}
          style={{backgroundColor: 'gray', marginBottom: 35}} 
          placeholder={'Enter User Name'} />
        
        <TextInput
          testID={'password'}
          style={{backgroundColor: 'gray'}} 
          placeholder={'Enter Password'} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex:1, 
    justifyContent: 'center'
  },
})

執行App後，可看見call API要到的內容

3.撰寫測試的 test case

在此步驟先撰寫測試的 test case，確認是否OK 新建 root/__tests__/HomeMockApi-test.js

import Users from '../app/api/users';

it('Api test', async function() {
  global.fetch = jest.fn().mockImplementation(()=>{
    var p = new Promise((resolve, reject) => {
      resolve({
          json:function() {
            return {Id:1}
          }
      })
    })
    return p;
  })

  const response = await Users.all();
//   console.log(response);
  expect(response.Id).toBe(1);
})

下圖說明Code

執行此test case ，成功

此時的 Users.all() 並非真的跑去call fb那串API，因為 global.fetch... 所以被判定使用模擬函數(mock function )

4.撰寫實際例子的 test case

步驟三成功後，就開始實際的例子吧!

​ 1) 將測試的mock function註解掉後執行test，會得到 fetch is not defined 的錯誤，如下圖。

fetch is not defined的原因: 在測試區域(test area)內，我們無法通過 test 偵測它到底是什麼東西，所以我們使用 isomorphic-fetch

​ 2) 安裝 isomorphic-fetch

$ npm install --save isomorphic-fetch es6-promise
$ npm install

3) 在 HomeMockApi-test.js內import isomorphic-fetch 執行test case，結果是失敗，但可以看到成功印出從API內獲取的內容，如下圖

import Users from '../app/api/users';
import 'isomorphic-fetch';

it('Api test', async function() {
  const response = await Users.all();
  console.log(response);
  expect(response.Id).toBe(1);
})

5) 修改expect 直接拿此 fb API 內的 movies 中隨便一比的 title 來測試，code 如下

import Users from '../app/api/users';
import 'isomorphic-fetch';

it('Api test', async function() {
  const response = await Users.all();
//   console.log(response);
  expect(response.movies[3].title).toEqual('Inception');
})

執行後成功，如下圖 (API內容可透過網頁開啟URL查看)

isomorphic-fetch Library

參考

• React-Native Test with jest #4 | test Api with mock function
• React-Native Test with jest #5 | test Api with simple example