setup-vitest_skill

Overview

This skill configures Vitest as the project's unit and integration test framework with Testing Library integration and sensible defaults for DOM testing, coverage, and timeouts. It installs required packages, creates a vitest.config.ts, adds TypeScript types and setup files, and wires test scripts for single-repo and monorepo workflows. The goal is a repeatable, accessible testing baseline ready for React, Vue, or Svelte projects.

How this skill works

The skill installs Vitest and Testing Library packages, generates or updates vitest.config.ts with include/exclude patterns, environment, globals, mocks, coverage settings, and timeouts. It adds a tests/setup.ts file to initialize globals, cleanup, and common mocks (for example window.matchMedia) and updates tsconfig.json and package.json scripts. For monorepos, it adjusts root pipeline and workspace scripts for Turborepo, pnpm, npm/yarn workspaces to run tests across packages.

When to use it

• Starting a new project that needs unit and integration tests.
• No test runner is currently detected in the repository.
• Migrating a codebase from Jest to Vitest.
• Adding Testing Library (React/Vue/Svelte) integration for DOM tests.
• Configuring CI or monorepo tooling to run tests across workspaces.

Best practices

• Use Testing Library query priority: getByRole → getByLabelText → getByPlaceholderText → getByText, reserving getByTestId as last resort.
• Prefer userEvent over fireEvent and test user behavior instead of implementation details.
• Keep setup and mocks minimal in tests/setup.ts; mock only where necessary and restore/clear mocks between tests.
• Use coverage provider 'v8' and set sensible thresholds; exclude test files and types from coverage.
• Add workspace-level scripts (turbo/pnpm/npm) so CI can run tests across packages consistently.

Example use cases

• Add Vitest to a React app: install @testing-library/react, configure vitest.config.ts with @vitejs/plugin-react and jsdom environment.
• Migrate Jest tests to Vitest: add globals, update tsconfig types to include vitest/globals, and adapt mocks to vi.
• Enable coverage reporting in CI: configure coverage.provider, reporters, and thresholds and run vitest run --coverage.
• Set up monorepo testing: add test pipeline entries to turbo.json and root scripts to run tests across workspaces.
• Create accessible component tests: use screen and getByRole with userEvent to simulate real user interactions.