测试

测试基础设施概述

React Router 的集成测试使用 Playwright 来验证跨不同浏览器和环境的功能。测试基础架构的核心是创建夹具应用程序并与之交互，无论是否启用了 JavaScript。

来源: integration/helpers/create-fixture.ts47-201 integration/helpers/create-fixture.ts210-358

夹具创建

测试基础架构的核心是 createFixture 函数，它会创建一个带有指定文件的临时应用程序

来源: integration/helpers/create-fixture.ts362-409 integration/helpers/create-fixture.ts410-451

示例测试设置

典型的测试设置如下所示

来源: integration/form-test.ts54-503 integration/defer-test.ts46-538

在有无 JavaScript 的情况下进行测试

React Router 测试会在启用和禁用 JavaScript 的情况下运行，以确保应用程序在两种环境中都能正常工作

来源: integration/form-test.ts509-519 integration/resource-routes-test.ts141-148

Vite 集成测试

对于 Vite 的测试，React Router 提供了额外的助手

来源: integration/helpers/vite.ts370-427 integration/vite-dev-test.ts16-452

测试类别

表单测试

表单测试验证表单提交和数据处理

测试涵盖

GET 和 POST 提交
表单验证
表单方法覆盖
文件上传
具有不同路径的表单操作

来源: integration/form-test.ts522-583 integration/form-test.ts587-1349

数据加载测试

数据加载测试验证加载器执行和数据获取

测试涵盖

初始数据加载
导航期间的数据加载
延迟数据加载
加载状态和 Suspense

来源: integration/transition-test.ts223-239 integration/defer-test.ts551-640

错误边界测试

错误边界测试验证错误是否被正确捕获和显示

测试验证

加载器中抛出的错误
操作中抛出的错误
渲染期间的错误
错误边界层级（路由 vs. 根路由）

来源: integration/error-boundary-test.ts160-272 integration/error-boundary-test.ts306-411

资源路由测试

测试返回非 HTML 响应的路由

测试验证

JSON 响应
状态码
头
错误处理

来源: integration/resource-routes-test.ts150-269 integration/resource-routes-test.ts193-269

Playwright 配置

Playwright 已配置为跨多个浏览器运行测试

来源: integration/playwright.config.ts11-54

测试文件结构

测试文件根据功能进行组织

integration/*.test.ts - 特定功能的测试文件
integration/helpers/*.ts - 测试的辅助工具
测试夹具在测试运行时创建于 .tmp/integration/

测试服务器模式

测试以不同的服务器模式运行

来源: integration/resource-routes-test.ts132 integration/error-boundary-test.ts296-299

创建带有测试的 Bug 报告

要报告 Bug，您可以使用 Bug 报告模板

来源: integration/bug-report-test.ts106-122

运行测试

可以使用 npm 脚本运行测试

您可以添加 --watch 以便在文件更改时重新运行测试。

来源: integration/bug-report-test.ts40-50

这个测试基础架构允许在不同环境和场景下对 React Router 进行全面测试，确保该库在各种实际情况中都能正常工作。

测试