SuperAPI AI 工具集

testing-react

测试与质量

查看项目

更新于 10-15 22:17

技能介绍

用途:编写与审查 React/TypeScript 测试,默认对 React 组件使用组件测试,对纯函数与服务类使用单元测试;E2E 用户流程与关键路径交由 Playwright,参见 e2e-testing。

测试分类:单元测试用 Vitest,目标为纯函数、工具、服务,文件为同目录 *.test.ts;组件测试用 Vitest + RTL,目标为 React 组件,文件为同目录 *.test.tsx;Hook 测试用 Vitest + RTL,目标为自定义 Hook,文件为同目录 *.test.ts;E2E 用 Playwright,目标为用户流程与关键路径,放在独立 e2e/ 目录。

配置:Vitest 配置 environment: 'jsdom'、globals: true,setupFiles 指向导入 @testing-library/jest-dom/vitest 的文件;使用 @vitejs/plugin-react,并镜像 tsconfig.json 中的路径别名。

关键规则:查询优先级为 getByRole > getByLabelText > getByPlaceholderText > getByText > getByTestId,仅在无可访问查询可用时使用 data-testid;Mock 边界为 API 服务、导航与外部提供者,子组件与 UI 库保持真实渲染以增强集成信心;每个测试一个行为,采用 AAA 结构,命名用 should <behavior> when <condition>;异步用 findBy* 处理异步元素,状态触发动作后用 waitFor,防抖/定时逻辑用 vi.useFakeTimers();交互优先 userEvent 而非 fireEvent;beforeEach 中 vi.clearAllMocks(),每个测试重建状态而非共享可变变量;按目录测试时一次处理一个文件(从最简单开始),逐个运行验证后再继续;测试暴露缺陷而非相反,若测试发现错误行为,应指出问题并建议修复源码,绝不调整测试去迎合错误行为。

运行命令:npx vitest(监听模式)、npx vitest run(单次运行,CI)、npx vitest run src/features/(指定目录)、npx vitest --coverage(覆盖率报告)。

限制:资料未提供安装步骤、版本要求、收费与平台信息。