前言
在上一篇教程中,我们成功搭建了基于Jest和Enzyme的单元测试框架并成功地跑起来第一个单元测试,可以点击这里回顾一下。今天,我们重点讨论如何通过Jest来mock数据。
什么是Mock
Mock的简单翻译就是模拟。既可以模拟数据,也可以模拟行为。在上一篇文章中,就用到了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的方法。