Write tests using Vitest and React Testing Library. Use when creating unit tests, component tests, integration tests, or mocking dependencies. Activates for test file creation, mock patterns, coverage, and testing best practices.

Vitest Testing Patterns This skill helps you write effective tests using Vitest and React Testing Library following project conventions. When to Use ✅ USE this skill for: Writing unit tests for utilities and functions Creating component tests with React Testing Library Setting up mocks for API calls, databases, or external services Integration testing patterns Understanding test coverage and CI setup ❌ DO NOT use for: Jest specific patterns → similar but check Jest docs for differences End to end testing → use Playwright or Cypress skills Performance testing → use dedicated performance tools API contract testing → use OpenAPI/Pact patterns Test Infrastructure Configuration : vitest.config.ts Environment: jsdom Setup file: src/test/setup.ts Coverage: v8 provider Commands : File Organization Name tests as {name}.test.ts or {name}.test.tsx . Core Testing Patterns 1. API Route Tests 2. Component Tests 3. Library/Utility Tests Mocking Patterns Module Mocking Function Mocking Chained Mock Pattern (Drizzle ORM) Timer Mocking Query Priorities Use queries in this order (most to least preferred): 1. getByRole Accessible queries (buttons, links, headings) 2. getByLabelText Form fields with labels 3. getByPlaceholderText Inputs with placeholders 4. getByText Non interactive elements 5. getByTestId Last resort (data testid) Async Patterns Test Cleanup Accessibility Testing Common Matchers References [Vitest Mocking Guide](https://vitest.dev/guide/mocking) [React Testing Library](https://testing library.com/docs/react testing library/intro) [Testing Library Queries](https://testing library.com/docs/queries/about)

vitest-testing-patterns