Claude Code testing-strategy:用组件属性和回调写 React 测试
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/testing-strategy/SKILL.md`,核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/testing-strategy/`,把核对后的文件保存为 `.claude/skills/testing-strategy/SKILL.md`。
- 在该项目根目录启动 Claude Code,在斜杠菜单中选择 `/testing-strategy`。
中文摘要
根据可见行为选择单元、集成或端到端范围,在 React 组件测试中复用样例并核对显示和回调。
SKILL.md 中文导读
可复现示例
样例 test-38 的 EventCard 通过属性接收 {name: 'Garden fair', eventId: 'spring-event'}。点击详情动作应报告该事件标识。工作步骤
- 从调用与用户视角列出显示和操作结果,准备最小输入。
- 按现有测试设施检查可见内容及回调数据,避免绑定实现细节。
验收方法
测试核对 {text: 'Garden fair', callbackValue: 'spring-event'}。复用基础属性,只为当前场景改必要数据。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开项目的 TypeScript 和 React 测试环境。组件测试示例使用工程已有的 Vitest 与 React Testing Library。
常见问题
测试应断言内部状态字段吗?
组件测试优先检查用户看到的输出和对外回调。这样内部重构后仍可按相同的职责验收。