前言

在上一篇教程中，我們成功搭建了基于Jest和Enzyme的單元測試框架并成功地跑起來第一個單元測試，可以點擊這里回顧一下。今天，我們重點討論如何通過Jest來mock數(shù)據(jù)。

什么是Mock

Mock的簡單翻譯就是模擬。既可以模擬數(shù)據(jù)，也可以模擬行為。在上一篇文章中，就用到了mock功能來忽略對多媒體文件和字體文件等的請求：

"jest": {..."moduleNameMapper": {"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__jest__/__mocks__/fileMock.js",...}}

當遇到.jpg等文件時，就會執(zhí)行fileMock.js的代碼，簡單的返回一個字符串:

module.exports = 'test-file-stub';

除了mock文件，比較常用的場景就是模擬網(wǎng)絡請求并返回響應的數(shù)據(jù)。

Mock網(wǎng)絡請求

假設(shè)我們程序中有如下代碼，其作用是發(fā)起一個ajax請求去請求一個api，獲取數(shù)據(jù)：

class DataApi extends BaseApi {getData() {return ajaxCall('api/data');} }export default new DataApi();

對應的，我們可以利用Jest的fn方法來模擬這個api調(diào)用并返回數(shù)據(jù)：

export default {getData: jest.fn(() => new Promise((resolve) => resolve([{time: '2017-11-01 11:58:00'data: 'This is the data you request1'},{time: '2017-11-01 11:58:00'data: 'This is the data you request2'},]))) }

次文件存放在單測root目錄下的common/api/data文件夾：

單測實例

假設(shè)有以下組件，在加載的時候會發(fā)送api請求獲取數(shù)據(jù)：

import React, {PureComponent} from 'react' import dataApi from 'common/api/data'export default class BossTask extends PureComponent {state = {taskList: []}componentDidMount() {dataApi.getData().then( taskList => (this.setState({taskList})));}render() {let {taskList} = this.state;return (<div className="container" >{taskList.map( (item) => {return (<div className="item">{item.data}</div>)})}</div>)} }

對應的單元測試如下：

import React from 'react' import {mount} from 'enzyme' import BossTask from 'src/setting/reward/boss_task' import dataApi from 'common/api/data'jest.mock('common/api/data');describe('boss task index page', () => {let wrapper;beforeEach(() => {wrapper = mount(<BossTask />);});afterEach(() => {wrapper.unmount();});it('should render without throwing an error', () => {expect(wrapper.find('.container').length).toBe(1);expect(wrapper.find('.item').length).toBe(2);});it('should call apis rightly', () => {expect(dataApi.getData).toBeCalled();}); });

通過顯式指定mock的來源：jest.mock('common/api/data')，來mock api請求。這里，我們使用了enzyme的mout方法來渲染組件，這個方法會執(zhí)行組件對應的生命周期方法。在上面的例子中，componentDidMount方法里就包含了請求api的方法。

總結(jié)

通過上面的步驟，就可以寫出一個簡單的模擬網(wǎng)絡請求的單元測試了。更多的Jest+enzyne用法，請期待下一期的文章

總結(jié)

以上是生活随笔為你收集整理的React单元测试：Jest + Enzyme（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。