SuperAPI AI 工具集

react-testing-library-best-practices

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

用途:为使用 React Testing Library(RTL)编写组件测试提供规则化指南,适合在编写、审查或重构 RTL 测试时参考,帮助避免实现细节测试并写出可维护、以用户为中心的测试。

主要能力:文档包含 9 个类别共 43 条规则,按优先级排列。查询选择(query-,关键)主张优先 getByRole、避免以 getByTestId 为主、使用 screen、表单字段用 getByLabelText、配合 name 选项、按存在与否选 getBy 或 queryBy、用 within() 限定范围。异步处理(async-,关键)建议用 findBy 替代 waitFor + getBy、必须 await findBy、waitFor 内只放单个断言、避免副作用、消失场景用 waitForElementToBeRemoved。常见反模式(anti-,关键)包括避免不必要的 act()、移除手动 cleanup、不测实现细节、避免空 waitFor 回调、不用 container 查询、不添加冗余 ARIA 角色。用户交互(user-,高)建议用 userEvent 替代 fireEvent、在 render 前 setup、await 交互、特殊键用 keyboard()、重输前 clear()。断言(assert-,高)涉及 jest-dom 匹配器、可视化用 toBeVisible()、文本用 toHaveTextContent()、输入用 toHaveValue()、可访问描述用 toHaveAccessibleDescription()。组件设置(setup-,中)含 wrapper 提供 Provider、自定义 render、模块级 mock、假定时器配置、renderHook 测试 Hook。测试结构(struct-,中)含 Arrange-Act-Assert、每个测试一种行为、描述性命名、避免在 beforeEach 中 render。调试(debug-)含 screen.debug()、logRoles、Testing Playground。可访问性(a11y-)含用 Role 查询验证可访问性、焦点管理与 ARIA 状态。

使用方式:按参考文件逐条阅读详细说明与代码示例,类别定义见 references/_sections.md,新规则模板见 assets/templates/_template.md,版本与参考信息见 metadata.json。

适用场景:React 组件测试的编写、代码审查、测试重构,以及提升测试的可访问性覆盖。

限制:资料未提供具体安装命令、依赖版本或运行步骤,暂未提供。