mcpField
T
testing-react

testing-react

github.com/thebeardedbearsas测试与质量107204 次安装今天更新
代码仓库

关于 testing-react

面向使用 React 19 的团队，提供测试策略指南。建议采用浏览器模式进行组件测试，并检查用户可见行为，同时介绍端到端、变异和基于属性的测试工具。

主要功能

  1. 01使用 Vitest Browser Mode 测试组件
  2. 02使用 vitest-browser-react 渲染与定位元素
  3. 03使用 Playwright 进行组件和端到端测试
  4. 04使用 Stryker 进行变异测试
  5. 05使用 fast-check 进行基于属性的测试
  6. 06使用 MSW 模拟 API 请求

适用场景

  1. 01在真实浏览器中测试组件行为
  2. 02运行完整用户流程的端到端测试
  3. 03通过变异分数评估测试
  4. 04生成基于属性的测试用例

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thebeardedbearsas/claude-craft --skill testing-react

安装后在 Claude Code 中输入/testing-react确认已加载。

附带文件REFERENCE.md

详细介绍

React 19 + Compiler 1.0 测试策略

版本： React 19.2+ | React Compiler 1.0 | Vitest 5 | Playwright

React Compiler 1.0（自动记忆化）对测试是透明的——测试可见行为，而不是内部优化。

2026 年推荐技术栈

类型工具用途
单元/组件Vitest 5 Browser Mode原生 Chromium/Firefox/WebKit
组件（浏览器）vitest-browser-reactrender + 定位器，与 Vitest Browser Mode 集成
组件测试Playwright CTRTL 的替代方案——真实浏览器
组件（JSDOM）React Testing Library 16仍在维护——适用于现有 JSDOM 测试套件
E2EPlaywright完整的用户流程
变异测试Stryker测试质量（分数 >= 80%）
基于属性的测试fast-check生成测试用例

优先使用真实浏览器（Vitest Browser Mode、Playwright CT），而不是 JSDOM（笨重且不完整）。React Testing Library 16 仍在维护：将其用于现有 JSDOM 测试套件，无益处时不要迁移。

来源： Vitest Browser Mode、vitest-browser-react、Playwright Component Testing、Stryker Mutator

不可妥协的基本要求

  • 新组件测试使用 Vitest Browser Mode（provider: playwright）——避免使用 JSDOM
  • 测试行为（用户所见），而非实现
  • 绝不测试 React Compiler 的优化（记忆化）
  • 合并前通过 Stryker 确保变异分数 >= 80%
  • monorepo 使用 Vitest projects（单元测试/浏览器测试分开）——workspace 已弃用
  • 使用 MSW 模拟 API 调用（不要手动 mock fetch）

按类型划分的检查清单

类型检查项
组件Vitest Browser Mode 或 Playwright CT，真实交互
HookVitest，必要时使用 renderHook
RSC测试返回的 HTML 渲染结果（不是 DOM）
E2EPlaywright，完整流程并使用 expect().toHaveURL()
变异测试npx stryker run，break 阈值 >= 50，high 阈值 >= 80

完整详情、代码示例、配置和检查清单：参见 REFERENCE.md

评论

支持 Markdown