1. 介紹
Jest是 Facebook 的一套開源的 JavaScript 測(cè)試框架， 它自動(dòng)集成了斷言、JSDom、覆蓋率報(bào)告等開發(fā)者所需要的所有測(cè)試工具，是一款幾乎零配置的測(cè)試框架。
2. 安裝
- 通過 npm 添加依賴：
npm install --save-dev jest babel-jest babel-core babel-preset-env
regenerator-runtime
babel-jest、 babel-core、 regenerator-runtime、babel-preset-env這幾個(gè)依賴是為了讓我們可以使用ES6的語法特性進(jìn)行單元測(cè)試，ES6提供的 import 來導(dǎo)入模塊的方式，Jest本身是不支持的。
- 添加.babelrc文件
在項(xiàng)目的根目錄下添加.babelrc文件，并在文件復(fù)制如下內(nèi)容:
{
"presets": ["env"]
}
- 修改package.json中的test腳本
打開package.json文件，將script下的test的值修改為jest：
"scripts": {
"test": "jest"
}
3. 使用
- sum.js
import axios from 'axios';
function sum (a, b) {
return a+b;
}
function add (a, b) {
return a+b;
}
function fetchUser() {
return axios.get('http://jsonplaceholder.typicode.com/users/1')
.then(res => res.data)
.catch(error => console.log(error));
}
export {
sum,
fetchUser
}
- sun.test.js
import {sum , fetchUser} from './sum';
// const fetchUser = require('./sum')
// 1. 相等判斷：toBe 使用 Object.is 來判斷相等，
// toEqual 會(huì)遞歸判斷 Object 的每一個(gè)字段，
// 對(duì)數(shù)值來說 toBe 和 toEqual 相同；
test("兩個(gè)數(shù)字相加", () => {
expect(sum(1,2)).not.toBe(2);
})
test('object assignment', () => {
const data = {one: 1};
data['two'] = 2;
expect(data).toEqual({one: 1, two: 2});
});
// 2. 判斷符點(diǎn)數(shù)：可使用 toBeCloseTo 來解決 JS 浮點(diǎn)精度帶來的問題，如下示例；
test('adding floating point numbers', () => {
const value = 0.1 + 0.2; // 0.30000000000000004
expect(value).toBeCloseTo(0.3); // 測(cè)試通過
});
test('fetchUser() 可以請(qǐng)求到一個(gè)含有name屬性值為Leanne Graham的對(duì)象', () => {
expect.assertions(1);
return fetchUser()
.then(data => {
expect(data.name).toBe('Leanne Graham');
});
});
//上面調(diào)用了expect.assertions(1)，它能確保在異步的測(cè)試用例中，
//有一個(gè)斷言會(huì)在回調(diào)函數(shù)中被執(zhí)行。這在進(jìn)行異步代碼的測(cè)試中十分有效。
test('mock', () => {
const mockCallback = jest.fn(x => 42 + x);
[0, 1].forEach(mockCallback);
console.log(mockCallback.mock.calls,'mockCallback.mock.calls')
// Mock函數(shù)被調(diào)用兩次
expect(mockCallback.mock.calls.length).toBe(2);
// 第一次調(diào)用Mock函數(shù)時(shí)，第一個(gè)參數(shù)為0
expect(mockCallback.mock.calls[0][0]).toBe(0);
// 第二次調(diào)用Mock函數(shù)時(shí)，第一個(gè)參數(shù)為1
expect(mockCallback.mock.calls[1][0]).toBe(1);
// 第一次調(diào)用Mock函數(shù)的返回值為42
expect(mockCallback.mock.results[0].value).toBe(42);
// const myMock = jest.fn();
// const a = new myMock();
// const b = {};
// const bound = myMock.bind(b);
// bound();
// console.log(myMock.mock.instances);
// // > [ <a>, <b> ]
// Mock 函數(shù)還可以通過工具函數(shù)模擬返回值。
const myMock = jest.fn();
console.log(myMock());
// > undefined
myMock
.mockReturnValueOnce(10)
.mockReturnValueOnce('x')
.mockReturnValue(true);
console.log(myMock(), myMock(), myMock(), myMock());
// > 10, 'x', true, true
});
4. 常用斷點(diǎ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); //判斷拋出異常
}）
5. 運(yùn)行測(cè)試
- 運(yùn)行測(cè)試
npm test - 使用 --watch 參數(shù)可以啟動(dòng)一個(gè)監(jiān)控界面，當(dāng)文件發(fā)生變化時(shí)，會(huì)便會(huì)運(yùn)行相關(guān)的測(cè)試。
npm test -- --watch - 使用 --coverage 參數(shù)，測(cè)試結(jié)束時(shí)還會(huì)得到一份測(cè)試覆蓋度報(bào)告，如下圖。
npm test -- --coverage
image.png
