1. 介紹
Jest是 Facebook 的一套開源的 JavaScript 測試框架聋迎， 它自動集成了斷言姐帚、JSDom衷旅、覆蓋率報告等開發(fā)者所需要的所有測試工具器一，是一款幾乎零配置的測試框架课锌。
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這幾個依賴是為了讓我們可以使用ES6的語法特性進(jìn)行單元測試，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 會遞歸判斷 Object 的每一個字段统翩，
// 對數(shù)值來說 toBe 和 toEqual 相同；
test("兩個數(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); // 測試通過
});
test('fetchUser() 可以請求到一個含有name屬性值為Leanne Graham的對象', () => {
expect.assertions(1);
return fetchUser()
.then(data => {
expect(data.name).toBe('Leanne Graham');
});
});
//上面調(diào)用了expect.assertions(1)，它能確保在異步的測試用例中呜师，
//有一個斷言會在回調(diào)函數(shù)中被執(zhí)行面徽。這在進(jìn)行異步代碼的測試中十分有效。
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ù)為0
expect(mockCallback.mock.calls[0][0]).toBe(0);
// 第二次調(diào)用Mock函數(shù)時趟紊，第一個參數(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})//判斷兩個對象是否相等
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)行測試
- 運(yùn)行測試
npm test - 使用 --watch 參數(shù)可以啟動一個監(jiān)控界面碰酝，當(dāng)文件發(fā)生變化時霎匈，會便會運(yùn)行相關(guān)的測試。
npm test -- --watch - 使用 --coverage 參數(shù)送爸，測試結(jié)束時還會得到一份測試覆蓋度報告铛嘱，如下圖。
npm test -- --coverage
image.png
