React单元测试:Jest + Enzyme(二)
前言在上一篇教程中,我们成功搭建了基于Jest和Enzyme的单元测试框架并成功地跑起来第一个单元测试,可以点击这里回顾一下。今天,我们重点讨论如何通过Jest来mock数据。 什么是MockMock的简单翻译就是模拟。既可以模拟数据,也可以模拟行为。在上一篇文章中,就用到了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等文件时,就会执行fileMock.js的代码,简单的返回一个字符串: module.exports = 'test-file-stub'; 除了mock文件,比较常用的场景就是模拟网络请求并返回响应的数据。 Mock网络请求假设我们程序中有如下代码,其作用是发起一个ajax请求去请求一个api,获取数据: class DataApi extends BaseApi { getData() { return ajaxCall('api/data'); } } export default new DataApi(); 对应的,我们可以利用Jest的fn方法来模拟这个api调用并返回数据: 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文件夹: 单测实例假设有以下组件,在加载的时候会发送api请求获取数据: 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方法来渲染组件,这个方法会执行组件对应的生命周期方法。在上面的例子中,componentDidMount方法里就包含了请求api的方法。 总结通过上面的步骤,就可以写出一个简单的模拟网络请求的单元测试了。更多的Jest+enzyne用法,请期待下一期的文章 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |