用途
testing-react 是一套面向 React 19.2+ 与 React Compiler 1.0 项目的测试策略技能,适用于编写测试、审查测试覆盖率或搭建测试环境的场景。其核心目标是让测试聚焦于用户可见行为,而不是内部实现或编译器优化。
主要能力
技能给出了 2026 年推荐的测试技术栈,按测试类型划分:
- 单元/组件测试:Vitest 5 Browser Mode,原生支持 Chromium、Firefox、WebKit。
- 浏览器内组件测试:vitest-browser-react,提供 render 与 locators,集成于 Vitest Browser Mode。
- 组件测试替代方案:Playwright CT,使用真实浏览器。
- JSDOM 组件测试:React Testing Library 16,仍被维护,适用于既有 JSDOM 测试套件。
- 端到端测试:Playwright,覆盖完整用户流程。
- 变异测试:Stryker,用于评估测试质量,要求分数不低于 80%。
- 基于属性的测试:fast-check,用于生成测试用例。
技能还列出若干不可协商的约定:新组件测试使用 Vitest Browser Mode(provider 为 playwright),避免 JSDOM;测试行为而非实现;不测试 React Compiler 的记忆化优化;合并前通过 Stryker 达到变异分数不低于 80%;monorepo 中使用 Vitest projects 分离 unit 与 browser(workspace 已弃用);使用 MSW 模拟 API 调用,而不是手工 mock fetch。
使用方式
技能按测试类型提供检查清单:
- 组件:使用 Vitest Browser Mode 或 Playwright CT,进行真实交互。
- Hook:使用 Vitest,必要时使用 renderHook。
- RSC:测试返回的 HTML 渲染结果,不涉及 DOM。
- E2E:使用 Playwright,覆盖完整流程,配合 expect().toHaveURL()。
- 变异测试:运行 npx stryker run,阈值 break >= 50、high >= 80。
更完整的细节、代码示例、配置与检查清单,资料指向 REFERENCE.md。
适用场景
适用于采用 React 19.2+ 与 React Compiler 1.0 的前端项目,尤其是需要统一测试策略、提升测试质量或从 JSDOM 迁移到真实浏览器测试的团队。也适用于 monorepo 中需要分离单元测试与浏览器测试的项目。
限制
资料未提供该技能的具体安装命令、依赖版本锁定方式、完整配置示例或 REFERENCE.md 的内容。技能本身为测试策略指导,不包含运行时库;实际使用需自行安装 Vitest、Playwright、Stryker、fast-check、MSW 等工具。资料未说明对非 React 19.2+ 项目的兼容性,也未提供价格或收费信息。