【前端单元测试入门05】react的单元测试之jest

jest

jest是facebook推出的一款测试框架，集成了前面所讲的Mocha和chai，jsdom，sinon等功能。

安装与配置

npm install --save-dev jest
npm install -g jest

运行命令jest后会自动运行项目下全部.test.js和.spec.js这种格式的文件。

涉及到运用ES或react的，要与babel相结合，加上.babelrc文件便可，老玩法了。

jest的配置默认只须要在package.json中配置便可，固然也能够用独立的配置文件。

咱们这里直接将jest的运行范围限定在test文件夹下，而不是所有，因此在package.json中加入以下配置：

"jest": {
    "testRegex": "/test/.*.test.jsx?$"
 }

注意到这里的匹配规则是正则表达式

基本用法

和以前介绍的mocha和chai的功能很像，甚至能够兼容部分mocha和chai的语法。

能够这么写

import React from 'react'
import { shallow } from 'enzyme'
import CommentItem from './commentItem'

describe('测试评论列表项组件', () => {
  // 这是mocha的玩法，jest能够直接兼容
  it('测试评论内容小于等于200时不出现展开收起按钮', () => {
    const propsData = {
      date: '2018-03-04 10:10:11',
      name: '匿名人',
      content: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题'
    }
    const item = shallow(<CommentItem {...propsData} />)
    //看到这里的断言了吗，实际上和chai的expect是很像的
    expect(item.find('.btn-expand').length).toBe(0);
  })
  // 这是jest的玩法，推荐用这种
  test('两数相加结果为两个数字的和', () => {
    expect(3).toBe(3);
  });
}

jest与eslint检测

若是看了上面的代码会发现我没有引用任何相似于

import *  from 'jest'

的代码，而那个expect是没有定义的。
这段代码直接运行jest命令没有任何问题，可是eslint会检测出错，对于这种状况，咱们能够再eslint配置文件.eslintrc中加入如下代码：

"env": {
    "jest": true
  },

jest的断言

前面的章节介绍的断言库chai，jest有本身的断言玩法。
除了前面的代码中已经写到的

expect(x).toBe(y)//判断相等，使用Object.is实现

还有经常使用的

expect({a:1}).toBe({a:1})//判断两个对象是否相等
expect(1).not.toBe(2)//判断不等

expect(n).toBeNull();//判断是否为null
expect(n).toBeUndefined();//判断是否为undefined
expect(n).toBeDefined();//判断结果与toBeUndefined相反
expect(n).toBeTruthy();//判断结果为true
expect(n).toBeFalsy();//判断结果为false

expect(value).toBeGreaterThan(3);//大于3
expect(value).toBeGreaterThanOrEqual(3.5);//大于等于3.5
expect(value).toBeLessThan(5);//小于5
expect(value).toBeLessThanOrEqual(4.5);//小于等于4.5

expect(value).toBeCloseTo(0.3); // 浮点数判断相等

expect('Christoph').toMatch(/stop/);//正则表达式判断

expect(['one','two']).toContain('one');//不解释


function compileAndroidCode() {
  throw new ConfigError('you are using the wrong JDK');
}

test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(ConfigError);//判断抛出异常
}）

更多断言玩法

jest的mock

介绍了jest替代mocha和chai的部分，那么接下来就看看如何替代sinon。
下面是官网的示例：

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
   callback(items[index]);
  }
}

const mockCallback = jest.fn();
forEach([0, 1], mockCallback);

// 判断是否被执行两次
expect(mockCallback.mock.calls.length).toBe(2);

// 判断函数被首次执行的第一个形参为0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// 判断函数第二次被执行的第一个形参为1
expect(mockCallback.mock.calls[1][0]).toBe(1);

从上面能够看到这种玩法很相似于sinon的 sinon.spy()。
固然也有相似于stub返回值的那种玩法，更多的请参考 jest mock的更多玩法

mock文件和css module的问题

若是js文件中引用了css或者本地其余文件，那么就可能测试失败。
为了解决这个问题，同时也为了提升测试效率，：

"jest": {
    "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/config/fileMock.js",
     "\\.(css|less)$": "identity-obj-proxy"
 }

而fileMock.js文件内容为：

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

而后安装identity-obj-proxy便可：

npm install --save-dev identity-obj-proxy

jest与别名

在webpack中常常会用到别名，而jest测试时，若是文件中引用了别名会出现找不到文件的问题。

毕竟jest测试时没有通过webpack处理

对于如下玩法

resolve: {  
    alias: {  
        common: path.resolve(__dirname, 'plugins/common/')  
    }  
}

能够经过

"jest": {
    "testRegex": "./src/test/.*.test.js$",
    "moduleNameMapper": {
      "^common(.*)$": "<rootDir>/plugins/common$1",
    }
}

这个和以前 mock文件和css module的问题 同样，都是使用了moduleNameMapper这个属性

生成测试覆盖率报告

只须要在jest命令后加入 --coverage便可

jest --coverage