# React 测试库该技能侧重于特定于 React 的测试模式。对于一般 DOM 测试模式（查询、用户事件、异步、可访问性），请加载“前端测试”技能。对于 TDD 工作流程，加载“tdd”技能。 ## 核心原则 **React 组件是函数** \- 像函数一样测试它们：输入（props）→ 输出（渲染的 DOM）。 **测试行为，而不是实现：** * ✅ 测试用户看到的内容和执行的操作 * ✅ 通过公共 API 进行测试（道具、渲染输出） * ❌ 不要测试组件状态 * ❌ 不要测试组件方法 * ❌不要使用浅渲染 **现代 RTL 自动处理清理：** * 没有用于渲染、用户事件或异步查询的手动“act()” * 没有手动 `cleanup()` \- 它是自动的 * 使用工厂函数代替`beforeEach` ## 快速参考主题 |指南 ---|--- 测试组件、道具和条件渲染 | [components.md]() 使用 renderHook 测试自定义钩子 | [hooks.md]() 测试上下文提供者和消费者| [context.md]() 测试表单输入、提交和验证 | [forms.md]() 需要避免的常见 React 测试错误 | [anti-patterns.md]() 加载状态、错误边界、门户、Suspense | [advanced.md]() ## 何时使用每个指南 ### 组件当您需要时，请使用[components.md]()： * 基本组件测试模式 * 测试道具如何影响渲染输出 * 测试条件渲染 * 正确与错误组件测试的示例 ### 挂钩当您需要时，请使用 [hooks.md]()： * 使用“renderHook”测试自定义钩子 * 使用 `result.current`、`act()` 和 `rerender()` * 用道具测试钩子 ### 上下文当您需要时，请使用 [context.md]()： * 对提供者使用“wrapper”选项 * 设置多个提供商 * 为上下文创建自定义渲染函数 * 测试消耗上下文的组件 ### 表格当您需要时，请使用 [forms.md]()： * 测试受控输入 * 测试表单提交 * 测试表单验证 * 用户与表单的交互模式 ### 反模式当您需要时，请使用 [anti-patterns.md]()： * 何时避免手动 `act()` 包装 * 为什么不需要手动`cleanup()` * 避免`beforeEach`渲染模式 * 为什么要避免测试组件内部 * 为什么浅层渲染会出现问题 ### 高级当您需要时，请使用 [advanced.md]()： * 测试加载状态 * 测试误差边界 * 测试门户 * 测试反应悬念 ## 摘要清单 React 特定的检查： *使用来自@testing-library/react的`render()`（不是酶的shallow/mount） * 使用`renderHook()`进行自定义钩子 * 对上下文提供者使用“wrapper”选项 * 没有手动 `act()` 调用（RTL 处理它） * 没有手动 `cleanup()` 调用（自动） * 测试组件输出，而不是内部状态 * 使用工厂函数，而不是“beforeEach”渲染 * 遵循 TDD 工作流程（参见 `tdd` 技能） * 使用通用 DOM 测试模式（参见“前端测试”技巧）

反应测试

包含技能