跳至主要內容
版本：29.7

開始使用

使用您最喜歡的套件管理員安裝 Jest

npm install --save-dev jest

讓我們從為一個假設的函式撰寫測試開始，這個函式會加總兩個數字。首先，建立一個 sum.js 檔案

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

然後，建立一個名為 sum.test.js 的檔案。這將包含我們的實際測試

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

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

將以下區段新增到您的 package.json

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

最後，執行 yarn test 或 npm test，Jest 將會印出這則訊息

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

您剛剛成功使用 Jest 撰寫您的第一個測試！

此測試使用 expect 和 toBe 來測試兩個值是否完全相同。若要了解 Jest 可以測試的其他內容，請參閱 使用比對器。

從命令列執行​

您可以直接從 CLI 執行 Jest（如果它在您的 PATH 中可用，例如透過 yarn global add jest 或 npm install jest --global），並使用各種有用的選項。

以下是使用 config.json 作為設定檔，並在執行後顯示原生作業系統通知，在符合 my-test 的檔案上執行 Jest 的方法

jest my-test --notify --config=config.json

如果您想進一步了解如何透過命令列執行 jest，請參閱 Jest CLI 選項 頁面。

其他設定​

產生基本設定檔​

根據專案，Jest 會詢問一些問題，並建立一個基本設定檔，每個選項都有簡短的說明

npm init jest@latest

使用 Babel​

若要使用 Babel，請安裝必要的相依性

npm install --save-dev babel-jest @babel/core @babel/preset-env

在專案根目錄建立一個 babel.config.js 檔，設定 Babel 以鎖定目前 Node 版本

babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

Babel 的理想設定會依專案而定。請參閱 Babel 文件 以取得更多詳細資訊。

讓 Babel 設定檔認識 Jest

如果 process.env.NODE_ENV 未設定為其他值，Jest 會將其設定為 'test'。您可以在設定中使用它，有條件地只設定 Jest 所需的編譯，例如

babel.config.js
module.exports = api => {
  const isTest = api.env('test');
  // You can use isTest to determine what presets and plugins to use.

  return {
    // ...
  };
};
註解

安裝 Jest 時會自動安裝 babel-jest，如果專案中有 babel 設定，它會自動轉換檔案。若要避免這種行為，您可以明確重設 transform 設定選項

jest.config.js
module.exports = {
  transform: {},
};

使用 webpack​

Jest 可用於使用 webpack 管理資產、樣式和編譯的專案。webpack 在某些方面比其他工具更具挑戰性。請參閱 webpack 指南 以開始使用。

使用 Vite​

Jest 可用於使用 vite 透過原生 ESM 提供原始碼的專案，以提供一些前端工具，vite 是一個有主見的工具，並提供一些開箱即用的工作流程。由於 vite 的 外掛系統 運作方式，Jest 並未完全受到 vite 支援，但有一些使用 vite-jest 的一級 jest 整合範例，由於這並未完全受到支援，您也可以閱讀 vite-jest 的限制。請參閱 vite 指南 以開始使用。

使用 Parcel​

Jest 可用於使用 parcel-bundler 管理資產、樣式和編譯的專案，類似於 webpack。Parcel 不需要任何設定。請參閱官方 文件 以開始使用。

使用 TypeScript​

透過 babel​

Jest 透過 Babel 支援 TypeScript。首先，請務必按照上述 使用 Babel 的說明進行操作。接下來，安裝 @babel/preset-typescript

npm install --save-dev @babel/preset-typescript

然後將 @babel/preset-typescript 新增至 babel.config.js 中的預設清單。

babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

但是，將 TypeScript 與 Babel 搭配使用有一些 注意事項。由於 Babel 中的 TypeScript 支援純粹是轉譯，因此 Jest 執行測試時不會檢查測試的類型。如果您需要此功能，可以使用 ts-jest，或單獨執行 TypeScript 編譯器 tsc（或作為建置流程的一部分）。

透過 ts-jest​

ts-jest 是支援 Jest 的 TypeScript 前置處理器，具備原始碼對應功能，讓您可以使用 Jest 來測試以 TypeScript 編寫的專案。

npm install --save-dev ts-jest

為了讓 Jest 使用 ts-jest 轉譯 TypeScript，您可能還需要建立一個 設定 檔案。

類型定義​

有兩種方法可以為以 TypeScript 編寫的測試檔案輸入 Jest 全域 API 類型。

您可以使用隨 Jest 附帶的類型定義，每次更新 Jest 時都會更新。安裝 @jest/globals 套件

npm install --save-dev @jest/globals

並從中匯入 API

sum.test.ts
import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

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

請參閱 describe.each/test.each 和 模擬函式 的其他使用說明文件。

或者，您可以選擇安裝 @types/jest 套件。它提供 Jest 全域變數的類型，而不需要匯入它們。

npm install --save-dev @types/jest
資訊

@types/jest 是在 DefinitelyTyped 維護的第三方函式庫，因此最新的 Jest 功能或版本可能尚未涵蓋。請盡可能匹配 Jest 和 @types/jest 的版本。例如，如果您使用 Jest 27.4.0，則理想情況下安裝 27.4.x 的 @types/jest。

使用 ESLint​

只要在測試檔案中使用它們之前，從 @jest/globals 匯入 Jest 全域輔助函式（describe、it 等），就可以在沒有任何進一步設定的情況下將 Jest 與 ESLint 搭配使用。這是為了避免 ESLint 的 no-undef 錯誤，因為它不知道 Jest 全域變數。

如果您想避免這些匯入，您可以設定 ESLint 環境，透過新增 jest 環境來支援這些全域變數

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "env": {
        "jest": true
      }
    }
  ]
}

或者使用 eslint-plugin-jest，它具有類似的效果

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "plugins": ["jest"],
      "env": {
        "jest/globals": true
      }
    }
  ]
}
編輯此頁面
最後更新於 ，作者為 yepitschunked