在容器中執行 Vue.js 測試

目錄

先決條件

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

概述

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

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

您將使用 Vitest（一個為 Vite 設計的極速測試執行器）以及 @vue/test-utils 來編寫單元測試，以驗證您的元件邏輯、props、事件和響應行為。

此設定可確保您的 Vue.js 元件在與使用者實際與應用程式互動的環境相似的環境中進行測試。

在開發過程中執行測試

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

$ src/components/__tests__/HelloWorld.spec.ts

此測試使用 Vitest 和 Vue Test Utils 來驗證 HelloWorld 元件的行為。

步驟 1：更新 compose.yaml

向您的 compose.yaml 檔案新增一個名為 vuejs-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:
  vuejs-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-vuejs-sample
    ports:
      - "8080:8080"

  vuejs-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app
          
  vuejs-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test:unit"]

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

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

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

步驟 2：執行測試

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

$ docker compose run --rm vuejs-test

此命令將

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

你應該看到類似於以下內容的輸出

Test Files: 1 passed (1)
Tests:      1 passed (1)
Start at:   16:50:55
Duration:   718ms
注意

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

摘要

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

你完成了什麼

  • 在 compose.yaml 中建立了一個 vuejs-test 服務來隔離測試執行。
  • 重用了開發 Dockerfile.dev 以確保開發和測試環境之間的一致性。
  • 使用 docker compose run --rm vuejs-test 在容器內執行測試。
  • 確保了跨環境的可靠、可重複測試，而無需依賴本地機器設定。

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

後續步驟

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

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