用途:这是一个测试方法论技能,建立在 react-19、react-state、react-forms 等 React 技能之上,不讲解这些 API 本身,只讲如何测试使用它们的组件。适用于编写 React 组件测试、验证用户交互、检查无障碍合规、用 MSW 模拟 API、测试自定义 Hook 与 React 19 特性(useActionState、use())、Suspense 边界与错误边界。
主要能力:以用户视角测试组件行为;提供查询优先级、用户交互、异步模式、MSW 模拟、React 19 Hook、无障碍、自定义 Hook、Vitest 配置、模拟模式等参考文档;提供 9 个模板,包括基础配置、组件基础、异步加载/错误/成功、表单与 useActionState、Hook 基础、API 集成、Suspense 与 use()、错误边界、axe-core 无障碍审计。
使用方式:安装命令为 npm install -D vitest @testing-library/react @testing-library/user-event @testing-library/jest-dom jsdom msw。基本用法是 render 组件后用 screen.getByRole 查询,配合 userEvent.setup() 执行交互,异步用 findBy 或 waitFor。资料还描述了一套强制 Agent 工作流:实现前并行调用 explore-codebase、research-expert 与 mcp__context7__query-docs,实现后用 sniper 验证。
关键规则与限制:优先用 getByRole;用 userEvent 而非 fireEvent;异步用 waitFor 而非 setTimeout;用 MSW 而非直接模拟 fetch;测试行为而非实现细节。禁止模式包括 fireEvent、setTimeout、优先 getByTestId、直接模拟 fetch、空 waitFor。具体配置与完整示例需查看对应模板与参考文件。