Claude Code Vitest for spies that preserve theme behavior
Write Vitest tests for TypeScript and React projects with observable calls, readable assertions, and a suitable environment for component interactions.
中文Install in Claude Code
Use Claude Code and a TypeScript project with Vitest installed. For React components, add React Testing Library and jsdom as needed.
- Review `.claude/skills/vitest/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/vitest/` in your project and save the reviewed file as `.claude/skills/vitest/SKILL.md`.
- Start Claude Code from that project's root, then select `/vitest` in the slash menu.
Example task
Use the theme formatting object as test-08. Its formatSize method already returns “24 px” for {amount: 24, unit: 'px'}. Use vi.spyOn to record one call while keeping the implementation.What to check
Assert that formatSize was called once with {amount: 24, unit: 'px'} and that the actual return value is “24 px”. Restore the spy at the end.
Original SKILL.md on GitHub · Updated
Frequently asked question
When is vi.spyOn appropriate?
Use vi.spyOn to observe the arguments or number of calls to an existing object method while preserving its implementation. Use vi.fn when you need a separate replacement function.