react-vitest

What problem does it solve?

Provides a focused workflow and examples for adding and improving tests in Vite-based React projects, reducing flaky tests, unclear mock patterns, and missing coverage enforcement so features can be validated confidently before release.

Core Features & Use Cases

• Project Setup: Dependency and vitest.config guidance to run tests in a jsdom environment with global helpers and a central setup file.
• Component Testing Patterns: Examples using React Testing Library and user-event to assert interactions and accessibility-friendly queries.
• Mocking & Providers: Patterns for mocking modules, hooks, and wrapping components with common providers (e.g., React Query) to keep tests deterministic.
• Coverage & CI: Configuration recommendations for V8 coverage provider and coverage thresholds to enforce quality in CI pipelines.
• Use Case: Add tests for a new Button component that verifies click handlers, accessibility attributes, and integration with a QueryClient provider while meeting a minimum coverage threshold.

Quick Start

Set up Vitest and React Testing Library in your Vite React project, add a src/test/setup.ts with jest-dom, create a component test using render and user-event, and configure vitest.config.ts with jsdom and V8 coverage thresholds.