React Testing Skill

Use this skill for React tests that focus on user behavior: Vitest/Jest setup, Testing Library queries, user-event flows, async UI, hooks, providers, mocks, integration tests, accessibility checks, and media component tests.

When to Use This Skill

Use when the user asks for tasks covered by the frontmatter triggers, especially implementation guidance, debugging, architecture choices, production hardening, or performance-sensitive decisions in this domain. Start from this orchestrator, then load the focused reference file that matches the requested detail level.

Core Workflow

1. Set up the runner and jsdom environment first, then centralize @testing-library/jest-dom, cleanup, and browser API mocks in test setup.
2. Write tests from the user perspective using role, label, text, placeholder, and display-value queries before falling back to test IDs.
3. Use userEvent.setup() for interactions and waitFor or findBy queries for async state changes.
4. Mock at module or network boundaries, not internal component state, and reset mocks between tests.
5. Create provider-aware render utilities for context, routers, query clients, themes, and other app-wide wrappers.
6. For media components, mock jsdom gaps such as HTMLMediaElement.play, pause, load, metadata properties, and IntersectionObserver.

Key Gotchas