【前端单元测试入门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