React单元测试：Jest + Enzyme（二）

前言

在上一篇教程中，我们成功搭建了基于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的方法。

总结

通过上面的步骤，就可以写出一个简单的模拟网络请求的单元测试了。更多的Jest+enzyne用法，请期待下一期的文章