jest
jest是facebook推出的一款測(cè)試框架喝噪，集成了前面所講的Mocha和chai捣域，jsdom故觅，sinon等功能燥撞。
安裝與配置
npm install --save-dev jest
npm install -g jest
運(yùn)行命令jest后會(huì)自動(dòng)運(yùn)行項(xiàng)目下所有.test.js和.spec.js這種格式的文件座柱。
涉及到運(yùn)用ES或react的迷帜，要與babel相結(jié)合，加上.babelrc文件即可色洞，老玩法了戏锹。
jest的配置默認(rèn)只需要在package.json中配置即可，當(dāng)然也可以用獨(dú)立的配置文件火诸。
我們這里直接將jest的運(yùn)行范圍限定在test文件夾下锦针，而不是全部，所以在package.json中加入如下配置：
"jest": {
"testRegex": "/test/.*.test.jsx?$"
}
注意到這里的匹配規(guī)則是正則表達(dá)式
基本用法
和之前介紹的mocha和chai的功能很像置蜀，甚至可以兼容部分mocha和chai的語法奈搜。
可以這么寫
import React from 'react'
import { shallow } from 'enzyme'
import CommentItem from './commentItem'
describe('測(cè)試評(píng)論列表項(xiàng)組件', () => {
// 這是mocha的玩法，jest可以直接兼容
it('測(cè)試評(píng)論內(nèi)容小于等于200時(shí)不出現(xiàn)展開收起按鈕', () => {
const propsData = {
date: '2018-03-04 10:10:11',
name: '匿名人',
content: '測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題'
}
const item = shallow(<CommentItem {...propsData} />)
//看到這里的斷言了嗎盯荤，實(shí)際上和chai的expect是很像的
expect(item.find('.btn-expand').length).toBe(0);
})
// 這是jest的玩法馋吗，推薦用這種
test('兩數(shù)相加結(jié)果為兩個(gè)數(shù)字的和', () => {
expect(3).toBe(3);
});
}
jest與eslint檢測(cè)
如果看了上面的代碼會(huì)發(fā)現(xiàn)我沒有引用任何類似于
import * from 'jest'
的代碼，而那個(gè)expect是沒有定義的廷雅。
這段代碼直接運(yùn)行jest命令沒有任何問題耗美，但是eslint會(huì)檢測(cè)出錯(cuò)，對(duì)于這種情況航缀，我們可以再eslint配置文件.eslintrc中加入以下代碼：
"env": {
"jest": true
},
jest的斷言
前面的章節(jié)介紹的斷言庫chai商架，jest有自己的斷言玩法。
除了前面的代碼中已經(jīng)寫到的
expect(x).toBe(y)//判斷相等芥玉，使用Object.is實(shí)現(xiàn)
還有常用的
expect({a:1}).toBe({a:1})//判斷兩個(gè)對(duì)象是否相等
expect(1).not.toBe(2)//判斷不等
expect(n).toBeNull();//判斷是否為null
expect(n).toBeUndefined();//判斷是否為undefined
expect(n).toBeDefined();//判斷結(jié)果與toBeUndefined相反
expect(n).toBeTruthy();//判斷結(jié)果為true
expect(n).toBeFalsy();//判斷結(jié)果為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); // 浮點(diǎn)數(shù)判斷相等
expect('Christoph').toMatch(/stop/);//正則表達(dá)式判斷
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。
下面是官網(wǎng)的示例：
function forEach(items, callback) {
for (let index = 0; index < items.length; index++) {
callback(items[index]);
}
}
const mockCallback = jest.fn();
forEach([0, 1], mockCallback);
// 判斷是否被執(zhí)行兩次
expect(mockCallback.mock.calls.length).toBe(2);
// 判斷函數(shù)被首次執(zhí)行的第一個(gè)形參為0
expect(mockCallback.mock.calls[0][0]).toBe(0);
// 判斷函數(shù)第二次被執(zhí)行的第一個(gè)形參為1
expect(mockCallback.mock.calls[1][0]).toBe(1);
從上面可以看到這種玩法很類似于sinon的 sinon.spy()灿巧。
當(dāng)然也有類似于stub返回值的那種玩法赶袄，更多的請(qǐng)參考 jest mock的更多玩法
mock文件和css module的問題
如果js文件中引用了css或者本地其他文件，那么就可能測(cè)試失敗抠藕。
為了解決這個(gè)問題饿肺，同時(shí)也為了提高測(cè)試效率，：
"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文件內(nèi)容為：
module.exports = 'test-file-stub';
然后安裝identity-obj-proxy即可：
npm install --save-dev identity-obj-proxy
生成測(cè)試覆蓋率報(bào)告
只需要在jest命令后加入 --coverage即可
jest --coverage
