Vitest Setup

Detect the project type, generate the right Vitest configuration, and produce working test infrastructure. Not a reference card, this skill creates files.

Workflow

1. Detect, scan the project to determine type and existing setup
2. Configure, generate vitest.config.ts tailored to the environment
3. Scaffold, create test setup, utilities, and a sample test
4. Wire up, add package.json scripts and TypeScript config

Step 1: Detect Project Type

Read these files to determine the project:

package.json          → dependencies, scripts, type field
tsconfig.json         → paths, compiler options
wrangler.toml         → Cloudflare Workers project
vite.config.ts        → existing Vite setup (extend, don't replace)
vitest.config.ts      → already configured? just fill gaps
jest.config.*         → migration candidate
src/                  → source structure

Classify as one of:

Type	Signals	Environment
Cloudflare Workers	wrangler.toml, @cloudflare/workers-types, cloudflare vite plugin	node with Workers-specific setup
React (Vite)	@vitejs/plugin-react, react-dom	jsdom or happy-dom
React (SSR/TanStack Start)	@tanstack/start, vinxi	Split: node for server, jsdom for client
Node/Hono API	hono, express, no react-dom	node
Library	exports field, no framework deps	node

If a vite.config.ts already exists, extend it rather than creating a separate vitest.config.ts, Vitest reads Vite config natively.

Step 2: Install Dependencies

Generate the install command based on detected type:

# Base (always)
pnpm add -D vitest

# React projects, add jsdom and Testing Library
pnpm add -D @vitest/coverage-v8 jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

# Workers projects, add Cloudflare test utilities
pnpm add -D @vitest/coverage-v8 @cloudflare/vitest-pool-workers