# React 测试库最佳实践使用测试库的 React 组件综合测试指南，专为 AI 代理和法学硕士而设计。包含 9 个类别的 43 条规则，按影响进行优先级排序，以指导测试编写和代码审查。 ## 何时申请在以下情况下请参考这些指南： * 使用 React 测试库编写新的组件测试 * 选择查询（getByRole、getByLabelText 等） * 处理测试中的异步操作（findBy、waitFor） * 模拟用户交互（userEvent） * 审查反模式测试和实现细节测试 ## 按优先级规则类别优先|类别 |影响 |前缀 ---|---|---|--- 1 |查询选择|关键 | `查询-` 2 |异步处理 |关键 | `异步-` 3 |常见的反模式 |关键 | ‘反’ 4 |用户互动 |高| `用户-` 5 |断言|高| `断言-` 6 |组件设置|中 | `设置-` 7 |测试结构|中 | `结构-` 8 |调试|低-中| `调试-` 9 |辅助功能测试 |低| `a11y-` ## 快速参考 ### 1\.查询选择（关键） * [`query-prefer-role`]() \- 优先使用 getByRole 而非其他查询 * [`query-avoid-testid`]() \- 避免将 getByTestId 作为主查询 * [`query-use-screen`]() \- 使用 screen 进行查询 * [`query-label-text-forms`]() \- 对表单字段使用 getByLabelText * [`query-role-name-option`]() \- 在 getByRole 中使用 name 选项 * [`query-get-vs-query`]() \- 使用 getBy 表示当前，使用 queryBy 表示不存在 * [`query-within-scope`]() \- 使用 inside() 来限定查询范围 ### 2\.异步处理（关键） * [`async-findby-over-waitfor`]() \- 使用 findBy 而不是 waitFor + getBy * [`async-await-findby`]() \- 始终等待 findBy 查询 * [`async-single-assertion-waitfor`]() \- waitFor 中的单个断言 * [`async-no-side-effects-waitfor`]() \- 避免 waitFor 中的副作用 * [`async-waitfor-disappear`]() \- 使用 waitForElementToBeRemoved ### 3\.常见反模式（关键） * [`anti-unnecessary-act`]() \- 避免不必要的 act() 包装 * [`anti-manual-cleanup`]() \- 删除手动清理调用 * [`anti-implementation-details`]() \- 避免测试实现细节 * [`anti-empty-waitfor`]() \- 避免空 waitFor 回调 * [`anti-container-queries`]() \- 避免使用容器进行查询 * [`anti-redundant-roles`]() \- 避免添加冗余 ARIA 角色 ### 4\.用户交互（高） * [`user-prefer-userevent`]() \- 使用 userEvent 而不是 fireEvent * [`user-setup-before-render`]() \- 在渲染之前设置 userEvent * [`user-await-interactions`]() \- 始终等待 userEvent 交互 * [`user-keyboard-for-special-keys`]() \- 使用keyboard()作为特殊键 * [`user-clear-before-type`]() \- 在重新输入之前使用clear() ### 5\.断言（高） * [`assert-jest-dom-matchers`]() \- 使用 jest-dom 匹配器 * [`assert-visible-over-in-document`]() \- 使用 toBeVisible() 获得可见性 * [`assert-text-content`]() \- 对文本使用 toHaveTextContent() * [`assert-have-value`]() \- 使用 toHaveValue() 作为输入 * [`assert-accessible-description`]() \- 使用 toHaveAccessibleDescription() ### 6\.组件设置（中） * [`setup-wrapper-providers`]() \- 对提供者使用包装器选项 * [`setup-custom-render`]() \- 使用提供者创建自定义渲染 * [`setup-mock-modules`]() \- 模块级别的模拟模块 * [`setup-fake-timers`]() \- 使用假计时器配置 userEvent * [`setup-render-hook`]() \- 使用 renderHook 来测试钩子 ### 7\.测试结构（中） * [`struct-arrange-act-assert`]() \- 遵循 Arrange-Act-Assert 模式 * [`struct-one-behavior-per-test`]() \- 每个测试测试一种行为 * [`struct-descriptive-names`]() \- 使用描述性测试名称 * [`struct-avoid-beforeeach-render`]() \- 避免在 beforeEach 中使用 render() ### 8\.调试（低-中） * [`debug-screen-debug`]() \- 使用 screen.debug() 检查 DOM * [`debug-logroles`]() \- 使用 logRoles 查找可用角色 * [`debug-testing-playground`]() \- 使用测试游乐场进行查询 ### 9\.辅助功能测试（低） * [`a11y-role-queries-verify`]() \- 角色查询验证可访问性 * [`a11y-verify-focus`]() \- 测试焦点管理 * [`a11y-test-aria-states`]() \- 测试 ARIA 状态和属性 ## 如何使用阅读各个参考文件以获取详细说明和代码示例： * [章节定义]() \- 类别结构和影响级别 * [规则模板]() \- 用于添加新规则的模板 ## 参考文件文件|描述 ---|--- [references/_sections.md]() |类别定义和排序 [assets/templates/_template.md]() |新规则模板 [metadata.json]() |版本和参考信息

反应测试库

包含技能