react-test-writer

Writes Vitest tests for a React TypeScript client using Testing Library conventions.

Updated May 21, 2026
One-click install
npx skills add https://github.com/Collins1892/radar-practice --skill react-test-writer-collins1892
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-test-writer
Source: https://github.com/Collins1892/radar-practice/tree/main/.claude/skills/react-test-writer
Command: npx skills add https://github.com/Collins1892/radar-practice --skill react-test-writer-collins1892

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing consistent Vitest tests for a React TypeScript app requires knowing the project's exact conventions, library versions, and known gotchas with Radix, Sonner, and react-day-picker. This Skill encodes all of that so each generated test matches existing patterns and passes on the first run. ## Core Features & Use Cases - Convention-driven test generation: Produces one it(...) per request with Arrange/Act/Assert comments, correct return types, behaviour-sentence naming, and the project's TypeScript style rules. - Six test archetypes: Covers unit, component, integration, form, router, and accessibility tests with boilerplate and rules for each, including MemoryRouter routing and module-level API mocking. - Library gotcha handling: Encodes fixes for Radix Select aria placement, react-day-picker v10 autoFocus, Sonner fake timers, DataTable generics, and the Windows threads pool requirement. - Use Case: Ask for a test that an audit form shows a validation error on empty submit, and receive a single it block matching AuditForm.test.tsx patterns, then run npm test from client/ to confirm the suite passes. ## Quick Start Write a Vitest test that the Audits list shows an error state when fetchAudits rejects, then run npm test from client/ to confirm it passes.

Frequently Asked Questions about react-test-writer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a Vitest test for a React component with Testing Library?

Render the component with a helper that supplies default props, query with getByRole or getByText, and assert behaviour rather than implementation. Use fireEvent for interactions and keep one it block per scenario with Arrange/Act/Assert comments.

How to mock API calls in Vitest React integration tests?

Use vi.mock at the top of the test file targeting the API module, then reset every mocked export with vi.mocked(...).mockReset() in beforeEach. Assert calls with toHaveBeenCalledWith and use mockResolvedValueOnce chains for sequential fetches.

Does react-day-picker v10 support the initialFocus prop?

No, react-day-picker v10 silently ignores initialFocus. Use the autoFocus prop on the Calendar component instead, otherwise focus behaviour will not occur and no error is thrown.

Why do Radix Select aria attributes not appear in tests?

Radix Select.Root renders no DOM node, so aria attributes must be placed on SelectTrigger. Query the combobox role on the trigger rather than expecting aria attributes on a wrapper element.

Why does Vitest time out on Windows with the default pool?

The default forks pool times out on Windows. Set pool: 'threads' in vite.config.ts to run the suite reliably on Windows environments.

When should I not add accessibility assertions to a test?

Do not add accessibility assertions to pure unit tests of functions like guards or error utilities. Reserve ARIA, role, and live-region assertions for component, integration, and dedicated accessibility tests.