react-vitest

Configure Vitest and Testing Library for React component tests.

42|9|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/drvoss/everything-copilot-cli --skill react-vitest
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-vitest
Source: https://github.com/drvoss/everything-copilot-cli/tree/main/skills/development/react-vitest
Command: npx skills add https://github.com/drvoss/everything-copilot-cli --skill react-vitest

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about react-vitest

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Vitest with React Testing Library in a Vite project?

To set up Vitest with React Testing Library, configure vitest.config.ts for a jsdom environment, add a central setup file like src/test/setup.ts with jest-dom, and install global helpers so render and user-event work seamlessly across component tests.

What's the best way to mock hooks and providers in Vitest component tests?

The best way to mock hooks and providers in Vitest is using vi-based mocking patterns to mock modules and hooks, and wrapping components with common providers like React Query to keep tests deterministic and isolated.

Does Vitest support V8 coverage thresholds for CI pipelines?

Vitest supports V8 coverage thresholds for CI pipelines by configuring the V8 coverage provider in vitest.config.ts, enforcing minimum coverage requirements locally and in CI to ensure code quality before release.

How do I test React component interactions and accessibility with Vitest?

Test React component interactions and accessibility in Vitest by using React Testing Library and user-event to assert interactions, verify click handlers, and query elements using accessibility-friendly patterns.

Can I use Vitest for unit testing in any React project?

Vitest unit testing applies specifically to Vite-based React projects, providing a jsdom test environment and centralized setup files; projects using other build tools may need different configuration or testing frameworks.