Claude Code Vitest：用 spy 测组件调用并保留原行为
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/vitest/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/vitest/`，把核对后的文件保存为 `.claude/skills/vitest/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/vitest`。
中文摘要
给 TypeScript 和 React 项目编写 Vitest 测试，检查实际调用、保持断言可读，并为组件交互配置适合的测试环境。
SKILL.md 中文导读
可复现示例
用主题格式化对象作为 test-08。它有方法 formatSize，输入 {amount: 24, unit: 'px'} 时原本返回“24 px”。用 vi.spyOn 记录一次调用，保留方法实现。工作步骤
- 确定要验证的对象方法、输入和已知输出，保留原有行为。
- 运行测试核对调用参数与返回值，随后还原 spy。
验收方法
断言 formatSize 只被调用一次且实参为 {amount: 24, unit: 'px'}，实际返回 “24 px”。完成后还原 spy。
GitHub 原文 · 更新日期
适用环境
需要 Claude Code 以及装好 Vitest 的 TypeScript 项目。测试 React 界面时可再使用 React Testing Library 和 jsdom。
常见问题
什么时候适合用 vi.spyOn？
需要观察现有对象方法的参数或调用次数，同时保留实现时可用 vi.spyOn。单独提供替代函数时可用 vi.fn。