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

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

后续步骤

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