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.