React单元测试:Jest + Enzyme(二)

前端之家收集整理的这篇文章主要介绍了React单元测试:Jest + Enzyme(二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

上一篇教程中,我们成功搭建了基于Jest和Enzyme的单元测试框架并成功地跑起来第一个单元测试,可以点击这里回顾一下。今天,我们重点讨论如何通过Jest来mock数据。

什么是Mock

Mock的简单翻译就是模拟。既可以模拟数据,也可以模拟行为。在上一篇文章中,就用到了mock功能来忽略对多媒体文件和字体文件等的请求:

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

当遇到.jpg等文件时,就会执行fileMock.js的代码,简单的返回一个字符串:

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

除了mock文件,比较常用的场景就是模拟网络请求并返回响应的数据。

Mock网络请求

假设我们程序中有如下代码,其作用是发起一个ajax请求去请求一个api,获取数据:

  1. class DataApi extends BaseApi {
  2. getData() {
  3. return ajaxCall('api/data');
  4. }
  5. }
  6.  
  7. export default new DataApi();

对应的,我们可以利用Jest的fn方法来模拟这个api调用并返回数据:

  1. export default {
  2. getData: jest.fn(
  3. () => new Promise(
  4. (resolve) => resolve([
  5. {
  6. time: '2017-11-01 11:58:00'
  7. data: 'This is the data you request1'
  8. },{
  9. time: '2017-11-01 11:58:00'
  10. data: 'This is the data you request2'
  11. },]))
  12. )
  13. }

文件存放在单测root目录下的common/api/data文件夹:

单测实例

假设有以下组件,在加载的时候会发送api请求获取数据:

  1. import React,{PureComponent} from 'react'
  2. import dataApi from 'common/api/data'
  3.  
  4. export default class BossTask extends PureComponent {
  5.  
  6. state = {
  7. taskList: []
  8. }
  9.  
  10. componentDidMount() {
  11. dataApi.getData()
  12. .then( taskList => (this.setState({taskList})));
  13. }
  14.  
  15. render() {
  16. let {taskList} = this.state;
  17. return (
  18. <div className="container" >
  19. {
  20. taskList.map( (item) => {
  21. return (
  22. <div className="item">{item.data}</div>
  23. )
  24. })
  25. }
  26. </div>
  27. )
  28. }
  29. }

对应的单元测试如下:

  1. import React from 'react'
  2. import {mount} from 'enzyme'
  3. import BossTask from 'src/setting/reward/boss_task'
  4. import dataApi from 'common/api/data'
  5.  
  6. jest.mock('common/api/data');
  7.  
  8. describe('boss task index page',() => {
  9.  
  10. let wrapper;
  11.  
  12. beforeEach(() => {
  13. wrapper = mount(<BossTask />);
  14. });
  15.  
  16. afterEach(() => {
  17. wrapper.unmount();
  18. });
  19.  
  20. it('should render without throwing an error',() => {
  21. expect(wrapper.find('.container').length).toBe(1);
  22. expect(wrapper.find('.item').length).toBe(2);
  23. });
  24.  
  25. it('should call apis rightly',() => {
  26. expect(dataApi.getData).toBeCalled();
  27. });
  28. });

通过显式指定mock的来源:jest.mock('common/api/data'),来mock api请求。这里,我们使用了enzyme的mout方法来渲染组件,这个方法会执行组件对应的生命周期方法。在上面的例子中,componentDidMount方法里就包含了请求api的方法

总结

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

猜你在找的React相关文章