如何使用 Jest 進行高效的單元測試：從零開始的實踐指南

2025-05-27

Jest 簡介與其重要性

Jest 是由 Facebook 開發的一款 JavaScript 測試框架，特別適用於 React 應用程式的測試。然而，它同樣可以用於測試任何 JavaScript 專案。它的核心理念是提供簡單、快速且可靠的測試體驗。

Jest 的主要特點包含：

零配置：Jest 預設提供合理的預設配置，讓開發者可以快速開始測試。
快照測試：Jest 提供快照測試功能，能幫助開發者捕捉元件的意外變更。
隔離測試：每個測試文件在獨立的環境中執行，避免相互干擾。
高性能：Jest 採用並行測試機制，加快測試的執行速度。

對於現代前端開發來說，單元測試已成為不可或缺的一環。Jest 以其高效與便捷成為大多數開發者的首選測試框架。

如何配置 Jest

要開始使用 Jest，首先需要在你的專案中進行安裝。你可以使用 npm 或 yarn 執行以下命令：

npm install --save-dev jest

或者使用 yarn：

yarn add jest --dev

安裝完成後，需在 package.json 中新增測試腳本：

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

對於大多數專案來說，Jest 的預設配置已經足夠使用。但若需自定義配置，可透過建立 jest.config.js 文件來完成，例如：

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

完成基本配置後，只需在專案目錄下建立 __tests__ 資料夾，並在其中新增測試文件，如 example.test.js，即可開始寫測試程式碼。

編寫高效的 Jest 測試

假設我們有一個簡單的函式庫 math.js，包含加法和減法運算：

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

對應的測試文件 math.test.js 如下：

import { add, subtract } from './math';

describe('Math Functions', () => {
  it('should add two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('should subtract two numbers', () => {
    expect(subtract(5, 3)).toBe(2);
  });
});

這裡使用了 Jest 提供的 describe 與 it 方法來組織和編寫測試案例，並且透過 expect 進行斷言驗證。

對於非同步程式碼，Jest 提供了靈活的處理方式。你可以使用 async/await 或是回傳 Promise 的方式，例如：

it('should fetch data successfully', async () => {
  const data = await fetchData();
  expect(data).toBe('expected data');
});

或是利用 .resolves 或 .rejects 進行驗證：

it('should fetch data successfully', () => {
  return expect(fetchData()).resolves.toBe('expected data');
});

Jest 的進階應用與最佳實踐

對於複雜的程式碼邏輯，需要隔離外部依賴進行測試。這時可以使用 Jest 的 Mock 功能。例如，測試一個發送請求的函數：

import axios from 'axios';
import { fetchUserData } from './api';

jest.mock('axios');

it('should fetch user data', async () => {
  axios.get.mockResolvedValue({ data: { name: 'John' } });
  const data = await fetchUserData();
  expect(data.name).toBe('John');
});

Jest 提供了 快照測試 功能，能捕捉元件渲染結果並進行比較：

import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

it('renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

Jest 具備內建的測試覆蓋率工具，能夠幫助開發者了解測試的完整性。透過以下命令產生測試報告：