What problem does it solve? React test suites often drift into brittle patterns: test-id queries, fireEvent misuse, arbitrary setTimeout waits, and misplaced e2e tests. This Skill enforces consistent, accessible, low-flake testing practices for a React SPA using Vitest, Testing Library, and Playwright. ## Core Features & Use Cases - Layer selection rules: Decide upfront whether a behavior belongs in a unit test, component test, or Playwright e2e test, always choosing the lowest sufficient layer. - Testing Library hard rules: Enforce query priority (role > label > placeholder > text > testId), userEvent over fireEvent, async findBy queries, and boundary-only mocking. - Ready-made patterns: Provider-wrapped render helpers, renderHook with wrappers, toast and error-state assertions, and targeted axe-core accessibility checks. - Use Case: When writing a test for a new dialog component, apply the query priority rules, wrap the render with QueryClient and router providers, and assert on role-based queries instead of test IDs. ## Quick Start Ask the assistant to write a Vitest component test for a React form following the react-testing query priority and userEvent rules.
