Jest 寫前端單元測試入門
?
??
本文轉載自微信公眾號「前端GoGoGo」，作者Joel 。轉載本文請聯系前端GoGoGo公眾號。
寫測試能減少 bug，提高代碼質量。同時，重構測試覆蓋率高的代碼，不擔心改壞以前的功能。
前端的測試可以分為 3 類：單元測試，集成測試 和 UI 測試。
- 單元測試是對軟件的最小單元進行測試。比如：一個函數，一個組件。
- 集成測試，也叫組裝測試或聯合測試。在單元測試的基礎上，將所有模塊按照設計要求組裝成為子系統或系統，進行測試。
- UI 測試是對 UI 的呈現效果和交互進行測試。
本文主要介紹用 Jest[1] 來寫單元測試。Jest 是一款優雅、簡潔的 JavaScript 測試框架。下面的是用 Jest 寫的單元測試：
import sum from './sum'; test('sum', () => { expect(sum(1, 2)).toBe(3); expect(sum(-1, -2)).toBe(-3); });
sum 是要測試的函數。test(...) 是包裹了要測試的一個特性。expect(...) 是斷言：期望 sum(1, 2) 的值是 3，如果 sum(1, 2) 的值不是 3，則該測試會失敗。
Jest 主要包含 3 塊內容：
- 安裝。
- 運行。
- Jest API。
1 安裝
Jest 是依賴 Node.js[2] 的。安裝好 Node 后，初始化 node 項目:
npm init -y
安裝 Jest
npm install --save-dev jest
支持 Babel
需要支持 ES6, ES7 等語法，則安裝 Babel 相關依賴:
yarn add --dev babel-jest @babel/core @babel/preset-env
在項目根目錄下創建 Babel 配置文件：babel.config.js 來配置與當前 Node 版本兼容的 Babel：
module.exports = { presets: [['@babel/preset-env', {targets: {node: 'current'}}]], };
支持 TypeScript
yarn add --dev @babel/preset-typescript
在項目根目錄下創建 TypeScript 配置文件：tsconfig.json 。內容類似：
{ "compilerOptions": { "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true, "esModuleInterop": true }, "include": [ "src/**/*" ], "exclude": [ "node_modules" ] }
2 運行
運行項目里的所有測試用例
需要在 package.json 中加如下內容：
{ "scripts": { "test": "jest" } }
測試用例要寫在單獨的文件，而不是放在要測試的文件里。測試用例的文件名需要帶 .spec.[js|ts] 或 .test.[js|ts]。比如，一個文件叫 sum.js，對其進行測試，一般在該文件的相同目錄下，創建個測試用例文件 sum.spec.js。
執行 npm run test 即可運行項目中，就會運行所有的測試用例。
運行特定的一個測試用例文件
在項目根目錄行執行 yarn jest 測試用例文件路徑 或 npm run test 測試用例文件路徑。
運行特定的一個測試用例
只需將要運行用例的 test(...) 改成 test.only(...)，然后再運行該測試用例文件。類似的，運行一組用例，把 describe(...) 改成 describe.only(...)。
獲取測試覆蓋率
測試覆蓋率(test coverage) 衡量的是功能代碼被測試用例覆蓋的比率。對代碼質量要求高的項目，會要求測試覆蓋率在 90% 以上。
獲取測試覆蓋率的命令:
jest --coverage
3 Jest API
斷言 API
編寫測試時，我們總是會做出一些假設，斷言就是用于在代碼中捕捉這些假設。比如：
expect(2 + 2).toBe(4)
Jest 支持主要斷言API如下：
?
??
所有的斷言API見：這里[3]。
Jest 場景
測試異步代碼
處理異步一般有 3 種方式：回調， Promise 和 Async/Await。
回調
業務代碼:
function fetchNameCallback(cb: (name: string) => void) { setTimeout(() => { cb('Joel'); }, 1000) }
用例代碼如下：
test('async: callback', done => { fetchNameCallback(name => { expect(name).toBe('Joel'); done(); // 通知 Jest，回調結束了 }); });
注意：異步回調結束后，需要調用參數 done。以此來通知 Jest，回調結束了。
Promise
業務代碼:
function fetchName(throwError?: boolean) { return new Promise((resolve, reject) => { setTimeout(() => { if(!throwError) { resolve('Joel') } else { reject('error happened') } }, 1000) }); }
用例代碼如下：
test('async: Promise', () => { fetchName().then(name => { expect(name).toBe('Joel'); }); // 異常處理 fetchName(true).catch(e => { expect(e).toMatch('error'); }); });
Async/Await
業務代碼和上面的 Promise 的相同。
用例代碼如下：
test.only('Async/Await', async () => { const name = await fetchName(); expect(name).toBe('Joel'); // 異常處理 try { fetchName(true); } catch(e) { expect(e).toMatch('error'); } });
測試前的準備操作和測試后的整理操作
寫測試的時候可能需要在測試前做一些準備工作。運行測試后，需要做進行一些整理工作。用 Jest 這么寫：
每次用例的前后都執行
// 前 beforeEach(() => { }); // 后 afterEach(() => { });
所有用例的前后執行
beforeAll(() => { }); afterAll(() => { });
只會被執行一次。
Mock 外部依賴
我們在測試模塊功能時，如果模塊對外部的依賴的是有問題的，也會導致測試的不通過。為規避這種問題，會 Mock外部依賴：用一個不出錯的實現來代替外部依賴。
Mock 第三方包的部分 api
這邊以 Mock axios[4] 為例,業務代碼:
axiosFetchUser = () => { return axios.get('/user'); }
測試代碼:
test('fetch user', () => { axios.get.mockImplementation(url => { if(/^\/user$/.test(url)) { return Promise.resolve({name: 'Joel'}) } return Promise.resolve('other') }) axiosFetchUser().then(({ name }) => { expect(name).toBe('Joel'); }) });
其中 axios.get.mockImplementation(...) Mock了 axios.get 的實現。
Mock 某個文件的部分內容
我們有個工具函數文件 utils.ts，內容如下:
const guid = () => ...; export default guid; export const getYear = () => ...; export const getMonth = () => ...;
我們只 Mock 上面文件中的 guid 和 getYear，其他部分保持原狀。這么寫：
jest.mock('./util', () => { const originalModule = jest.requireActual('./util'); return { __esModule: true, ...originalModule, default: () => 'abc', // mock guid getYear: () => 2021, }; });
Mock 完整的第三方包和文件
Mock 完整的第三方包和文件只需做 2 步。
在 __mocks__/ 下建 Mock 的文件。
通知 Jest 用 Mock 的實現：jest.mock('./moduleName') 或 jest.mock('module_name')。
詳細介紹見: 這里[5]。
最后
行動起來，開始練習寫單元測試吧~
參考資料
[1]Jest: https://jestjs.io/
[2]Node.js: https://nodejs.org/en/
[3]這里: https://jestjs.io/zh-Hans/docs/expect
[4]axios: https://axios-http.com/
[5]這里: https://jestjs.io/zh-Hans/docs/manual-mocks
