【前端單元測試入門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