用途:为 React 应用编写单元测试、集成测试与质量保障,强调“测行为不测实现”,即关注用户可见与可操作的部分,避免直接测试内部状态,让测试更易理解并能捕获真实缺陷。
主要能力与内容:
- 测试工具配置:给出 Vitest 配置示例(jsdom 环境、globals、setupFiles、v8 覆盖率与 reporter),以及测试初始化 setup 文件(扩展 jest-dom matchers、afterEach 中 cleanup)。
- 组件测试:渲染组件、断言文本与禁用状态、通过 userEvent 触发点击并断言回调调用次数。
- 表单测试:输入邮箱与密码、提交表单并 waitFor 断言提交参数;校验非法邮箱时用 findByText 断言错误提示。
- Hook 测试:用 renderHook 与 act 测试自定义 Hook(如计数器增减);带依赖的 Hook 通过 mock fetch 测成功与失败分支,断言 loading、data、error 状态。
- 集成测试:通过自定义 renderWithAuth 注入 AuthProvider,测试登录与否的显示分支;用 MemoryRouter 的 initialEntries 测试路由页面渲染。
- Mocking:使用 msw 的 setupServer 与 rest 模拟 API,配套 beforeAll/afterEach/afterAll 生命周期;用 vi.mock 替换重型组件。
- 无障碍测试:结合 jest-axe 的 axe 与 toHaveNoViolations 断言无违规。
使用方式与最佳实践:优先使用语义化查询(getByRole、getByLabelText),少用 getByTestId;像用户一样点击、输入、导航;异步用 findBy 自动等待;afterEach cleanup 重置 DOM;Mock 外部依赖(API、定时器、模块);覆盖加载、错误与空状态;测试命名清晰;在 CI/CD 中运行测试。
限制:资料未提供该技能的安装命令、适用平台、收费或价格信息;示例代码依赖 Vitest、React Testing Library、Jest、msw、jest-axe 等库,需自行按项目环境引入。