在容器中运行 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 测试工作流程

Dockerfile 参考 – 理解所有 Dockerfile 指令及语法。
编写 Dockerfile 的最佳实践 – 编写高效、可维护且安全的 Dockerfile。
Compose 文件参考 – 学习在 compose.yaml 中配置服务的完整语法和可用选项。
docker compose run CLI 参考 – 在服务容器中运行一次性命令。

后续步骤

接下来，您将学习如何使用 GitHub Actions 设置 CI/CD 管道，以在容器化环境中自动构建和测试您的 Vue.js 应用程序。这可确保您的代码在每次推送或拉取请求时都经过验证，从而在整个开发工作流程中保持一致性和可靠性。