使用 Vite 和 TS 在 React 项目中配置 Vitest、MSW 和 Playwright - 第 3 部分

Playwright 是一款适用于 Web 应用的与框架无关的端到端测试（也称为 E2E 或集成测试）工具。 Playwright 拥有丰富的开发经验，使写作变得简单，并且能够轻松应对更改测试。

---

1.安装剧作家

要设置 Playwright，请运行以下命令：

npm init playwright@latest

系统将引导您完成终端中的设置向导。当提示 “在哪里放置端到端测试？” 时，您可以将其设置为 src/tests（如早期教程中的建议）。

将脚本添加到 package.json

在 package.json 中，添加以下两个脚本来运行 Playwright 测试：

这允许您在开发和 CI 环境中运行测试。

编剧配置

playwright.config.ts 文件应配置如下：

配置的主要变化：

• use.baseURL：这设置了开发服务器的基本 URL，因此您不必在每个测试中都编写它。
• webServer：此块描述如何启动开发服务器。除非您处于 CI 环境中，否则它将重用已运行的服务器。
• testDir：Playwright 应该在其中查找 E2E 测试的目录（在本例中为 src/tests/e2e）。

2. 配置 MSW 进行浏览器测试

到目前为止，MSW 已设置为在 Node.js 环境中模拟 API 响应。不过，由于 Playwright 使用真实浏览器进行测试，因此需要配置 MSW 在浏览器环境下工作。

创建一个新的 JavaScript 模块，用于注册 MSW 服务工作线程以进行基于浏览器的测试：

3. 在开发模式下注册Worker

要在应用程序以开发模式运行时启动 MSW Worker，请将以下内容添加到应用程序的根模块（例如 src/main.tsx）：

确保在 .env 文件中设置 VITE_API_MOCK 环境变量：

VITE_API_MOCK="true"

4. 编写 E2E 测试

现在您可以为应用程序中的流程编写 E2E 测试。这是剧作家测试的示例：

5. 运行测试

要运行 E2E 测试，请使用以下命令：

npm run test:e2e:ci

这将以 CI 模式执行测试，这对于自动化管道很有用。

以上是使用 Vite 和 TS 在 React 项目中配置 Vitest、MSW 和 Playwright - 第 3 部分的详细内容。更多信息请关注PHP中文网其他相关文章！