What problem does it solve? Writing reliable React component tests requires choosing the right harness, handling async rendering, mocking network calls, and avoiding anti-patterns like testing internal state or misusing act(). This Skill provides concrete patterns and checklists for testing React applications correctly. ## Core Features & Use Cases - Vitest Browser Mode patterns: Covers async render/renderHook with vitest-browser-react, expect.element auto-retrying assertions, locator-based interactions, portals, Suspense, and error boundaries. - Legacy Testing Library support: A deep-dive resource documents @testing-library/react with jsdom, including sync render, userEvent, findBy queries, and MSW setupServer. - Anti-pattern guidance: Flags unnecessary act() wrapping, shallow rendering, testing component internals, and shared render state, with corrected examples. - Use Case: When adding tests for a login form component, load this Skill to render the form in a real browser, fill fields via locators, mock the API with MSW setupWorker, and assert the callback payload. ## Quick Start Ask the AI to write a Vitest Browser Mode test for a React form component that fills inputs, submits, and verifies the onSubmit callback.
