SuperAPI AI 工具集

react-testing

测试与质量

查看项目

更新于 10-15 23:41

技能介绍

用途:用于编写以用户行为为中心的 React 测试,覆盖 Vitest/Jest 配置、Testing Library 查询、user-event 交互流程、异步 UI、Hooks、Provider、Mock、集成测试、可访问性检查与媒体组件测试。适用于实现指导、调试、架构选择、生产加固及性能敏感决策等场景。

主要能力与用法:先搭建测试运行器与 jsdom 环境,在测试 setup 中集中配置 @testing-library/jest-dom、cleanup 与浏览器 API mock。从用户视角编写测试,优先使用 role、label、text、placeholder、display-value 查询,再退回 test ID。交互使用 userEvent.setup(),异步状态变化使用 waitFor 或 findBy 查询。Mock 应位于模块或网络边界,而非组件内部状态,并在测试之间重置 mock。为 context、router、query client、主题等应用级包装创建感知 Provider 的 render 工具。媒体组件需补齐 jsdom 缺口,如 HTMLMediaElement.play、pause、load、metadata 属性及 IntersectionObserver。

限制与注意事项:避免断言组件状态等实现细节,应断言可见行为与可访问性状态;fireEvent 层级低于 userEvent,除非直接触发浏览器或媒体事件,否则优先 userEvent;异步断言应等待 UI 变化而非任意计时器;jsdom 不实现真实媒体播放、布局与浏览器编解码,需显式 mock 相关 API;Provider 状态可能在测试间泄漏,需通过 render 工具创建全新 client 并在每个测试后执行 cleanup。参考文件包括 references/react-testing-complete-guide.md 与 references/testing-recipes.md,涵盖安装配置、组件测试、表单、异步组件、Hooks、Context、Mock、集成测试、可访问性测试、测试工具与视频/媒体测试。具体安装命令与价格信息暂未提供。