zhao
在現代網頁開發中，自動化測試已成為不可或缺的一環。它不僅能夠提高程式碼的品質與穩定性，還可以節省大量的維護時間。而 Jest 是目前最受歡迎的前端自動化測試框架之一，特別適用於 JavaScript 和 Node.js 環境。本系列教程將帶領讀者從基礎開始學習 Jest 的使用方法，並逐步進階至 TDD (Test-Driven Development) 和 BDD (Behavior-Driven Development) 的實踐應用。
Jest 簡介
Jest 是由 Facebook 開源的一個全功能測試解決方案，它提供了快速且可靠的測試運行器，支援快照測試、 mocking 等特性。其主要優勢包括:
1. 零配置 – Jest 幾乎不需要任何配置即可上手使用。
2. 內置的模擬函數(Mocks) – 讓你可以輕鬆模擬依賴項以進行單元測試。
3. 快照測試 – 幫助確保 UI 或 API 回應保持不變。
4. 廣泛的相容性 – 對多種 JavaScript 語法及第三方庫提供良好的支援。
5. 可擴展性 – 透過插件系統和豐富的API，可以根據需要進一步定製 Jest。
安裝和使用 Jest
要在專案中使用 Jest，首先需要在項目根目錄下執行以下命令來安裝 Jest：
npm install --save-dev jest
或者對於 Yarn 使用者來說：
yarn add --dev jest
接著，可以在 `package.json` 中添加一個新的腳本命令來運行 Jest：
"scripts": {
"test": "jest"
},
現在，您可以使用 `npm run test` 或在終端機輸入 `yarn test` 來運行所有測試。
撰寫第一個 Jest 測試
為了演示如何使用 Jest，我們假設有一個簡單的計算機科學問題——找到兩個整數的最大公因數(Greatest Common Divisor, GCD)。我們將分幾步建立這個功能的測試和實現。
1. 創建基本結構
首先，創建一個名為 `gcd.js` 的文件，其中包含以下代碼：
export function calculateGCD(a, b) {}
然後，創建一個測試文件 `gcd.test.js`，該文件應位於相同的路徑下。
2. 編寫第一個測試
打開 `gcd.test.js`，插入以下內容：
import { expect } from 'expect'; // Jest 內建的 expect 模塊
import { calculateGCD } from './gcd';
describe('calculateGCD', () => {
it('should return the correct gcd for two numbers', () => {
const result = calculateGCD(8, 6);
expect(result).toBe(2);
});
});
這段代碼定義了一個描述(`describe`)和一個測試案例(`it`)。 `expect()` 函式來自 Jest 內建的 `@types/jest` 模塊，它會檢查 `calculateGCD(8, 6)` 的返回值是否為 `2`。
3. 實現 GCD 邏輯
回到 `gcd.js`，我們可以用 Euclid 算法來實現 `calculateGCD`:
// gcd.js
export function calculateGCD(a, b) {
while (b > 0) {
let temp = a % b;
a = b;
b = temp;
}
return a;
}
4. 運行測試
現在，運行 `npm test` 或 `yarn test` 來執行所有的測試。如果一切順利，應該看到類似這樣的結果：
PASS tests/gcd.test.js
calculateGCD
✓ should return the correct gcd for two numbers (9ms)
-----------|----------|----------|----------|----------|------------------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|----------|----------|----------|----------|------------------------------
All files | 0 | 0 | 0 | 0 |
-----------|----------|----------|----------|----------|------------------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.733 s, estimated 3 s
Ran all test suites.
深入 Jest 功能
隨著您的測試套件變大會逐漸發現 Jest 提供的其他強大功能，例如：
1. 異步測試 – 處理 promise 和 async/await。
2. 快照測試 – 比較 UI 組件的渲染結果或資料結構。
3. mocking – 模擬外部依賴，如 API 請求或存取資料庫。
4. 錯誤處理 – 檢驗測試中的特定錯誤訊息。
5. CI 集成 – 在連續整合環境中運行測試。
這些主題超出了本文範圍，但您可以參考 Jest 的官方文檔以獲得更詳細的資訊。
總結
在本文中，我們探討了 Jest 作為前端自動化測試框架的基本用法。從安裝和設置到撰寫第一個測試案例，以及如何利用 Jest 的內建功能來提升測試效率。通過不斷地練習和探索，您可以熟練掌握 Jest，並將其應用於實際的前端開發工作之中。
隨著 Web 開發的不斷發展，測試的重要性只會越來越大。希望這篇指南能激發您對自動化測試的興趣，並在未來的專案中發揮作用！
