What problem does it solve? Component tests for a Vite + React + TypeScript SPA often mock the wrong layer, race on async interactions, or silently skip accessibility checks. This Skill sets up and authors a coherent component-test layer — React Testing Library for user-centric rendering, Mock Service Worker v2 for network-boundary mocking, and vitest-axe for runtime accessibility assertions — so tests exercise the real client and catch contract drift. ## Core Features & Use Cases - Environment setup: Configures the jsdom Vitest environment (never happy-dom, which breaks axe), @vitejs/plugin-react, and setupFiles wiring jest-dom matchers, RTL cleanup, the MSW server lifecycle, and the vitest-axe matcher. - Network-boundary mocking: Intercepts HTTP with MSW v2 setupServer so a generated @hey-api/openapi-ts client and its serialization run for real, with per-test handler overrides and request-body capture. - User-realistic interactions: Enforces accessible-query priority (getByRole first), always-awaited user-event v14 calls, findBy*/waitFor async handling, and a per-test TanStack Query QueryClientProvider with retry: false. - Use Case: Testing a signup form — fill fields via user-event, capture the real request body in an MSW handler, assert the success state renders, and assert toHaveNoViolations on the shipped state. ## Quick Start Use react-component-testing to set up the jsdom test environment and write a component test for my SignupForm that mocks the API with MSW and checks accessibility.
