在容器中執行 React.js 測試

目錄

先決條件

完成本指南的所有前面章節，從容器化 React.js 應用程式開始。

概述

測試是開發過程中的關鍵部分。在本節中，你將學習如何

  • 在 Docker 容器中使用 Vitest 執行單元測試。
  • 使用 Docker Compose 在隔離、可復現的環境中執行測試。

您將使用 Vitest（一個為 Vite 設計的極速測試執行器）以及 Testing Library 進行斷言。

在開發過程中執行測試

docker-reactjs-sample 應用程式在以下位置包含一個示例測試檔案：

$ src/App.test.tsx

此檔案使用 Vitest 和 React Testing Library 來驗證 `App` 元件的行為。

第 1 步：安裝 Vitest 和 React Testing Library

如果您尚未新增必要的測試工具，請執行以下命令進行安裝：

$ npm install --save-dev vitest @testing-library/react @testing-library/jest-dom jsdom

然後，更新您的 `package.json` 檔案的 `scripts` 部分，新增以下內容：

"scripts": {
  "test": "vitest run"
}

第 2 步：配置 Vitest

使用以下配置更新您專案根目錄中的 `vitest.config.ts` 檔案：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
  test: {
    environment: "jsdom",
    setupFiles: "./src/setupTests.ts",
    globals: true,
  },
});
注意

`vitest.config.ts` 中的 `test` 選項對於在 Docker 中進行可靠測試至關重要。

  • `environment: "jsdom"` 模擬類似瀏覽器的環境，用於渲染和 DOM 互動。
  • `setupFiles: "./src/setupTests.ts"` 在每個測試檔案之前載入全域性配置或模擬（可選但推薦）。
  • `globals: true` 啟用全域性測試函式，如 `describe`、`it` 和 `expect`，而無需匯入它們。

有關更多詳細資訊，請參閱官方 Vitest 配置文件。

第 3 步：更新 compose.yaml

在您的 `compose.yaml` 檔案中新增一個名為 `react-test` 的新服務。此服務允許您在隔離的容器化環境中執行測試套件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

services:
  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-reactjs-sample
    ports:
      - "8080:8080"

  react-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test"]

`react-test` 服務重用了用於開發的相同 `Dockerfile.dev`，並覆蓋了預設命令以透過 `npm run test` 執行測試。此設定確保了與您的本地開發配置一致的測試環境。

完成以上步驟後，你的專案目錄應包含以下檔案

├── docker-reactjs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

第 4 步：執行測試

要在容器內執行你的測試套件，請從專案根目錄執行以下命令

$ docker compose run --rm react-test

此命令將

  • 啟動您的 `compose.yaml` 檔案中定義的 `react-test` 服務。
  • 使用與開發相同的環境執行 npm run test 指令碼。
  • 在測試完成後自動移除容器 `docker compose run --rm` 命令。
注意

有關 Compose 命令的更多資訊，請參閱Compose CLI 參考。

摘要

在本節中，您學習瞭如何使用 Vitest 和 Docker Compose 在 Docker 容器中執行 React.js 應用程式的單元測試。

你完成了什麼

  • 安裝並配置了 Vitest 和 React Testing Library，用於測試 React 元件。
  • 在 `compose.yaml` 中建立了一個 `react-test` 服務來隔離測試執行。
  • 重用了開發 Dockerfile.dev 以確保開發和測試環境之間的一致性。
  • 使用 `docker compose run --rm react-test` 在容器內運行了測試。
  • 確保了跨環境的可靠、可重複測試，而無需依賴本地機器設定。

探索官方參考資料和最佳實踐以提升你的 Docker 測試工作流程

後續步驟

接下來，您將學習如何使用 GitHub Actions 設定 CI/CD 流水線，以在容器化環境中自動構建和測試您的 React.js 應用程式。這確保了您的程式碼在每次推送或拉取請求時都經過驗證，從而保持了開發工作流程的一致性和可靠性。

使用 GitHub Actions 自動化你的構建 »