本文轉(zhuǎn)載自微信公眾號「寫代碼的寶哥」，作者寫代碼的寶哥。轉(zhuǎn)載本文請聯(lián)系寫代碼的寶哥公眾號。

Jest 是一個簡單易用的 JavaScript 測試框架。最初由 Meta 公司團(tuán)隊維護(hù)。2022 年 5 月，Meta 公司正式將自己的開源項目Jest 移交給 OpenJS Foundation[1]，這表示 Jest 由公司驅(qū)動變?yōu)樯鐓^(qū)驅(qū)動，有 OpenJS Foundation 保底，Jest 將不會因公司發(fā)展需要而停止維護(hù)。

下面我們就來學(xué)習(xí)吧。

快速上手

初始化項目

首先創(chuàng)建項目目錄：

mkdir jest-demos && cd jest-demos
npm init -y

然后，安裝 Jest 依賴：

npm install --save-dev jest

第一個測試文件

創(chuàng)建待測試文件 src/sum.js：

function sum(a, b) {
  return a + b;
}
module.exports = sum;

創(chuàng)建測試文件 __tests__/sum.test.js：

const sum = require('../src/sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

注：按照約定，測試文件以 .test.js 或 .spec.js 結(jié)尾，并且放在 __tests__ 目錄中。

package.json 文件中增加腳本：

{
  "scripts": {
    "test": "jest"
  }
}

終端上執(zhí)行命令 npm test，查看結(jié)果。

圖片

這樣我們就完成了第一個測試文件的編寫和集成。

存在的問題

不過目前存在 2 個問題：

• Jest 只支持 CommonJS 代碼，并不支持 ES Module 代碼，為了測試 ES Module 代碼，我們只能將 ES Module 代碼轉(zhuǎn)換為 CommonJS 代碼
• Jest 也不支持 TypeScript 代碼

如何解決呢？有 2 個方案：

1. 使用 Babel + @babel/preset-env + @babel/preset-typescript 的組合，或者
2. 使用 ts-jest（基于 TypeScript）

不過為了得到完整的類型檢查支持，我們選擇 ts-jest。下面就來學(xué)習(xí)。

配置 ts-jest

ts-jest 本質(zhì)上就是 Jest transformer，支持你在 TypeScript 項目里使用 Jest。

這部分配置我們參照官方教程[2]。

安裝必要依賴

首先安裝必要依賴：

npm install --save-dev ts-jest jest typescript @types/jest

• ts-jest 是我們必須要安裝的
• ts-jest 依賴 jest 和 typescript，因此也安裝下（jest 在上一步已經(jīng)安裝，所以在這里是可選的）
• 安裝 @types/jest 是為了獲取類型提示支持

生成配置文件

然后，生成 Jest 配置文件——這里借助 ts-jest 指令來生成：

npx ts-jest config:init

這一步會在項目根目錄下創(chuàng)建 jest.config.js 文件：

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

修改文件后綴

將 src/sum.js 和 __tests__/sum.test.js 的文件后綴改成 .ts，并將代碼改成 ES Module 方式組織。

// src/sum.ts
function sum(a, b) {
  return a + b;
}
export default sum;

// __tests__/sum.test.ts
import sum from "../src/sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

終端上執(zhí)行命令 npm test，查看結(jié)果。

圖片

也成功了。不過有一條告警，建議我們將 tsconfig.json 中的 esModuleinterop 字段設(shè)置成 true。

釋出 tsconfig.json

為了設(shè)置 esModuleinterop 字段，我們將 tsconfig.json 文件釋放出來。

$ npx tsx --init

Created a new tsconfig.json with:         
                                           TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

釋出的配置中包含 esModuleInterop: true 選擇，因此我們也無需修改。不過因為開啟了嚴(yán)格模式（strict： true），因此還要對源代碼做類型注解。

// src/sum.ts
function sum(a: number, b: number) {
  return a + b;
}
export default sum;

再次運行測試——成功！

圖片

下一步

以上，我們就學(xué)完了 Jest 基礎(chǔ)使用和配置的部分的內(nèi)容。下一步大家可以在 Jest 官網(wǎng)上按照下面的順序自行學(xué)習(xí)。

1. 學(xué)習(xí)匹配器（Matcher）的使用[3]，常用的匹配器有 .toBe()、.toEqual() 和 .toStrictEqual()，完整列表參見這里：https://jestjs.io/docs/expect[4]
2. 學(xué)習(xí)如何測試異步代碼[5]，主要有 2 種異步調(diào)用方式：回調(diào)和 Promise。回調(diào)是通過 done 函數(shù)，Promise 則有多種測試方式：直接返回、使用 async await、或者配合前面任意種一方式直接丟給 expect 函數(shù)（類似 return|await expect(promise).resolves|rejects.toBe()）
3. 學(xué)習(xí)使用跟啟動、清理相關(guān)的一些調(diào)用周期函數(shù)[6]。比如：beforeAll()、beforeEach()。同時 Jest 還提供了類似 test.only()/describe.only() 的函數(shù)，讓你僅測試一小部分的代碼
4. 學(xué)習(xí) Mock 函數(shù)的使用[7]。這部分的內(nèi)容經(jīng)常會用到，比如 Mock 函數(shù)的創(chuàng)建、實現(xiàn)和使用、如果 Mock 第三方模塊（全部和局部）
5. 學(xué)習(xí)如何配置瀏覽器環(huán)境的測試[8]（利用 jsdom），需要安裝 jest-environment-jsdom

References

[1]OpenJS Foundation:https://jestjs.io/blog

[2]官方教程:https://kulshekhar.github.io/ts-jest/docs/getting-started/installation

[3]匹配器（Matcher）的使用:https://jestjs.io/docs/using-matchers

[4]https://jestjs.io/docs/expect:https://jestjs.io/docs/expect

[5]測試異步代碼:https://jestjs.io/docs/asynchronous

[6]使用跟啟動、清理相關(guān)的一些調(diào)用周期函數(shù):https://jestjs.io/docs/setup-teardown

[7]學(xué)習(xí) Mock 函數(shù)的使用:https://jestjs.io/docs/mock-functions

[8]如何配置瀏覽器環(huán)境的測試:https://jestjs.io/docs/tutorial-jquery