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
