react-test
Enforce TDD workflow for React. Write React Testing Library tests first (behavior-focused, accessibility-first), then implement components. Detects Vitest or Jest and verifies coverage targets.
- Kind
- Prompt
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- commands/react-test.md
- License
- MIT
- Jobs
- Testing, Implementation, UI/UX work
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# React TDD Command This command enforces test-driven development for React using React Testing Library plus Vitest or Jest, detected at runtime. ## What This Command Does 1. **Define Component Signature**: Scaffold the component, prop type, and exports 2. **Write Behavior Tests First**: RTL queries (role-first), `userEvent`, MSW for network — RED 3. **Run Tests**: Verify they fail for the right reason 4. **Implement Minimal Code**: Just enough to pass — GREEN 5. **Refactor**: Improve while keeping tests green 6. **Check Coverage**: Hit the targets in [rules/react/testing.md](../rules/react/testing.md) ## When to Use Use `/react-test` when: - Implementing a new React component or custom hook - Adding test coverage to an untested component - Fixing a bug (write failing test first that reproduces it) - Building forms, state machines, or accessibility-critical UI - Onboarding to RTL + Vitest/Jest workflow ## TDD Cycle ``` RED -> Write failing test for the next behavior GREEN -> Implement minimal component code to pass REFACTOR -> Improve component, tests stay green REPEAT -> Next behavior ``` ## Runner Detection ```bash …