微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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用法,请期待下一期的文章

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...