Jest Do It - 運行單元測試

《論語．公冶長》：「聽其言而觀其行。」說明了 unit test 的重要性。

今天，我們將深入了解如何使用 Jest 進行單元測試，並探討一些 Jest 的進階功能和應用。單元測試對於確保程式碼品質至關重要，它幫助我們發現程式中的問題並確保功能按照預期運行。Jest 是一個功能強大的 JavaScript 測試框架，除了基本的單元測試外，它還支持快照測試、模組模擬等高級功能。讓我們一起探索這些功能及其應用。

今日範例程式：https://github.com/elvisdragonmao/2024-GitHub-Actions/tree/main/9

什麼是 Jest？

Jest 是由 Facebook 開發的一個 JavaScript 測試框架，適用於測試 JavaScript 和 TypeScript 程式。它提供了簡單的 API 和許多強大的功能，如快照測試、模組模擬、異步測試等。Jest 以其易用性、速度和強大的功能而受到廣泛歡迎。

Jest 的基本功能

• 簡單的 API：Jest 提供了簡單的 API 來編寫測試，如 test 和 expect 函數。
• 快照測試：Jest 可以對函數的輸出進行快照測試，這對於測試 UI 組件和其他需要驗證輸出一致性的功能非常有用。
• 模組模擬：Jest 支援模組模擬，允許你替換模組中的依賴套件以進行測試。
• 異步測試：Jest 支援異步測試，允許你測試異步程式，如回調、Promises 和 async/await。

實作：配置並運行 Jest 測試框架的單元測試

步驟 1：設定 Jest

1. 初始化 Node.js 專案

   如果你還沒有 Node.js 專案，首先初始化一個新的專案：

   Bash複製

   mkdir my-jest-projectcd my-jest-projectnpm init -y

2. 安裝 Jest

   在專案目錄中安裝 Jest：

   Bash複製

   npm install --save-dev jest

3. 配置 Jest

   在 package.json 文件中添加 Jest 配置：

   JSON複製

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

   這樣，你可以使用 npm test 命令來運行 Jest 測試。

4. 編寫測試

   在專案根目錄下建立一個 sum.js 文件，並在其中編寫一個簡單的函數：

   JS複製

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

   然後，在同一目錄下建立一個 sum.test.js 文件，編寫測試程式：

   JS複製

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

步驟 2：配置 GitHub Actions

1. 建立 .github/workflows/test.yml 文件

   在專案根目錄下建立 .github/workflows/test.yml 文件，配置工作流程以運行 Jest 測試：

   YAML複製

   name: Run Jest Testson:  push:    branches:      - main  pull_request:    branches:      - mainjobs:  test:    runs-on: ubuntu-latest    steps:      - name: Check out code        uses: actions/checkout@v3      - name: Set up Node.js        uses: actions/setup-node@v3        with:          node-version: "20"      - name: Install dependencies        run: npm install      - name: Run tests        run: npm test

步驟 3：檢查工作流程結果

1. 在 GitHub 上查看 Actions

   進入 GitHub 的 Actions 標籤頁，檢查工作流程執行情況。你將看到 Jest 測試的結果。

2. 修復測試問題

   根據 Jest 的測試報告，修復程式中的問題，以確保所有測試都能通過。

Jest 的進階功能和應用

1. 快照測試

   快照測試允許你對函數的輸出進行快照，並在以後的測試中比較這些快照。這對於測試 UI 組件和其他需要驗證輸出一致性的功能非常有用。

   範例：

   JS複製

   const myFunction = require("./myFunction");test("matches the snapshot", () => {	expect(myFunction()).toMatchSnapshot();});

   注意： 快照文件將儲存在 __snapshots__ 目錄中，每次測試運行時會進行比較。

2. 模組模擬

   Jest 支援模組模擬，允許你替換模組中的依賴套件以進行測試。

   範例：

   JS複製

   const myModule = require("./myModule");jest.mock("./myDependency", () => {	return {		myFunction: jest.fn(() => "mocked value")	};});test("uses the mocked dependency", () => {	expect(myModule()).toBe("mocked value");});

3. 異步測試

   Jest 支援異步測試，允許你測試異步程式，如回調、Promises 和 async/await。

   範例（回調）：

   JS複製

   function fetchData(callback) {	setTimeout(() => {		callback("data");	}, 1000);}test("fetches data asynchronously", done => {	fetchData(data => {		expect(data).toBe("data");		done();	});});

   範例（Promises）：

   JS複製

   function fetchData() {	return new Promise(resolve => {		setTimeout(() => {			resolve("data");		}, 1000);	});}test("fetches data asynchronously with promises", () => {	return fetchData().then(data => {		expect(data).toBe("data");	});});

   範例（async/await）：

   JS複製

   async function fetchData() {	return new Promise(resolve => {		setTimeout(() => {			resolve("data");		}, 1000);	});}test("fetches data asynchronously with async/await", async () => {	const data = await fetchData();	expect(data).toBe("data");});

設計測試時的一些技巧

1. 保持測試簡單明瞭

   測試應該簡單明瞭，每個測試應該只關心一個功能或特殊情況。這樣可以更容易地找到問題並確保測試能夠準確描述功能需求。

2. 使用描述性測試名稱

   測試名稱應該描述測試的預期行為，這樣可以更容易理解測試的目的。例如，使用 test('should add two numbers correctly') 代替 test('test123')。

3. 覆蓋特殊情況

   測試應該覆蓋所有可能的特殊情況和錯誤情況，以確保程式能夠處理這些情況。

4. 避免測試副作用

   簡單來說就是不要留下痕跡。測試不應該改變系統狀態或影響其他測試，應該在測試完成後清理。我們使用 GitHub Actions 來運行測試，所以不太需要擔心這個問題。

5. 測試可配置性和錯誤處理

   測試應該涵蓋程式中的可配置性和錯誤處理路徑，以確保系統在各種情況下都能正常工作。不會因為一個小錯誤就導致整個系統崩潰。

6. 利用 Mock 和 Stub

   使用模擬（mock）和替身（stub）來隔離測試對象和依賴項，這樣可以專注於測試對象本身的行為。

7. 測試速度和性能

   測試應該快速運行，以提高開發效率。避免長時間運行的測試，並定期檢查測試性能。

結語

今天我們深入探討了 Jest 的功能和應用，包括快照測試、模組模擬、異步測試等。了解這些功能可以幫助我們編寫更全面的測試，確保程式的穩定性和可靠性。希望你能通過今天的探討，更好地應用 Jest 進行單元測試，提高程式品質和開發效率。明天我們要來討論如何在不同的平台上進行多平台測試。