vitest

Name: vitest
Author: jezweb

1.4kinstalls96forks

How to install vitest?

jezweb/claude-skills/vitest

$npx -y skills add jezweb/claude-skills --skill vitest

Installs into the current project.

Summary

Set up Vitest testing in any project — detects type (Cloudflare Workers, React, Node, library), generates vitest.config.ts, test setup, utilities, and a sample test. Covers mocking patterns, coverage config, workspace setup, Jest migration. Use whenever the user mentions adding t

Files · 1

View on GitHub

SKILL.md

1	# Vitest Setup
2
3	Detect the project type, generate the right Vitest configuration, and produce working test infrastructure. Not a reference card — this skill creates files.
4
5	## Workflow
6
7	1. Detect — scan the project to determine type and existing setup
8	2. Configure — generate vitest.config.ts tailored to the environment
9	3. Scaffold — create test setup, utilities, and a sample test
10	4. Wire up — add package.json scripts and TypeScript config
11
12	## Step 1: Detect Project Type
13
14	Read these files to determine the project:
15
16	```
17	package.json → dependencies, scripts, type field
18	tsconfig.json → paths, compiler options
19	wrangler.toml → Cloudflare Workers project
20	vite.config.ts → existing Vite setup (extend, don't replace)
21	vitest.config.ts → already configured? just fill gaps
22	jest.config.* → migration candidate
23	src/ → source structure
24	```
25
26	Classify as one of:
27
28	\| Type \| Signals \| Environment \|
29	\|------\|---------\|-------------\|
30	\| Cloudflare Workers \| wrangler.toml, @cloudflare/workers-types, cloudflare vite plugin \| `node` with Workers-specific setup \|
31	\| React (Vite) \| @vitejs/plugin-react, react-dom \| `jsdom` or `happy-dom` \|
32	\| React (SSR/TanStack Start) \| @tanstack/start, vinxi \| Split: `node` for server, `jsdom` for client \|
33	\| Node/Hono API \| hono, express, no react-dom \| `node` \|
34	\| Library \| exports field, no framework deps \| `node` \|
35
36	If a `vite.config.ts` already exists, extend it rather than creating a separate vitest.config.ts — Vitest reads Vite config natively.
37
38	## Step 2: Install Dependencies
39
40	Generate the install command based on detected type:
41
42	```bash
43	# Base (always)
44	pnpm add -D vitest
45
46	# React projects — add jsdom and Testing Library
47	pnpm add -D @vitest/coverage-v8 jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event
48
49	# Workers projects — add Cloudflare test utilities
50	pnpm add -D @vitest/coverage-v8 @cloudflare/vitest-pool-workers
51
52	# Node/Hono projects
53	pnpm add -D @vitest/coverage-v8
54
55	# If migrating from Jest, also remove:
56	pnpm remove jest ts-jest @types/jest jest-environment-jsdom babel-jest
57	```
58
59	Use the project's package manager (check for pnpm-lock.yaml, yarn.lock, bun.lockb, or package-lock.json).
60
61	## Step 3: Generate vitest.config.ts
62
63	### Cloudflare Workers
64
65	```typescript
66	import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
67
68	export default defineWorkersConfig({
69	test: {
70	globals: true,
71	poolOptions: {
72	workers: {
73	wrangler: { configPath: "./wrangler.toml" },
74	},
75	},
76	},
77	});
78	```
79
80	If the project uses the Cloudflare Vite plugin (`@cloudflare/vite-plugin`), integrate into the existing vite.config.ts instead:
81
82	```typescript
83	/// <reference types="vitest/config" />
84	import { defineConfig } from "vite";
85	import { cloudflare } from "@cloudflare/vite-plugin";
86
87	export default defineConfig({
88	plugins: [cloudflare()],
89	test: {
90	globals: true,
91	},
92	});
93	```
94
95	### React (Vite)
96
97	```typescript
98	/// <reference types="vitest/config" />
99	import { defineConfig } from "vite";
100	import react from "@vitejs/plugin-react";
101
102	export default defineConfig({
103	plugins: [react()],
104	test: {
105	globals: true,
106	environment: "jsdom",
107	setupFiles: ["./src/test/setup.ts"],
108	css: true,
109	},
110	});
111	```
112
113	If a vite.config.ts already exists, add the `test` block to it rather than creating a new file.
114
115	### Node / Hono API
116
117	```typescript
118	import { defineConfig } from "vitest/config";
119
120	export default defineConfig({
121	test: {
122	globals: true,
123	environment: "node",
124	},
125	});
126	```
127
128	### With Coverage (add to any config)
129
130	```typescript
131	test: {
132	// ... existing config
133	coverage: {
134	provider: "v8",
135	reporter: ["text", "html", "lcov"],
136	exclude: [
137	"node_modules/",
138	"*/.config.*",
139	"*/.d.ts",
140	"/test/",
141	],
142	},
143	},
144	```
145
146	## Step 4: Generate Test Setup File
147
148	Create `src/test/setup.ts` (React projects only):
149
150	```typescript
151	import "@testing-library/jest-dom/vitest";
152	```
153
154	That single import adds all the custom matchers (toBeInTheDocument, toHaveTextContent, etc.) and registers the Vitest `expect.extend` automatically.
155
156	## Step 5: Add TypeScript Config
157
158	Add to `tsconfig.json` compilerOptions:
159
160	```json
161	{
162	"compilerOptions": {
163	"types": ["vitest/globals"]
164	}
165	}
166	```
167
168	For projects with multiple tsconfig files (e.g. tsconfig.app.json + tsconfig.node.json), add to the one that covers test files — usually the root tsconfig.json or create a tsconfig.test.json that extend

People who liked this also viewed

6 picks

Type

vitest

1.4kinstalls96forks

View on GitHub

How to install vitest?

jezweb/claude-skills/vitest

$npx -y skills add jezweb/claude-skills --skill vitest

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Vitest Setup
2
3	Detect the project type, generate the right Vitest configuration, and produce working test infrastructure. Not a reference card — this skill creates files.
4
5	## Workflow
6
7	1. Detect — scan the project to determine type and existing setup
8	2. Configure — generate vitest.config.ts tailored to the environment
9	3. Scaffold — create test setup, utilities, and a sample test
10	4. Wire up — add package.json scripts and TypeScript config
11
12	## Step 1: Detect Project Type
13
14	Read these files to determine the project:
15
16	```
17	package.json → dependencies, scripts, type field
18	tsconfig.json → paths, compiler options
19	wrangler.toml → Cloudflare Workers project
20	vite.config.ts → existing Vite setup (extend, don't replace)
21	vitest.config.ts → already configured? just fill gaps
22	jest.config.* → migration candidate
23	src/ → source structure
24	```
25
26	Classify as one of:
27
28	\| Type \| Signals \| Environment \|
29	\|------\|---------\|-------------\|
30	\| Cloudflare Workers \| wrangler.toml, @cloudflare/workers-types, cloudflare vite plugin \| `node` with Workers-specific setup \|
31	\| React (Vite) \| @vitejs/plugin-react, react-dom \| `jsdom` or `happy-dom` \|
32	\| React (SSR/TanStack Start) \| @tanstack/start, vinxi \| Split: `node` for server, `jsdom` for client \|
33	\| Node/Hono API \| hono, express, no react-dom \| `node` \|
34	\| Library \| exports field, no framework deps \| `node` \|
35
36	If a `vite.config.ts` already exists, extend it rather than creating a separate vitest.config.ts — Vitest reads Vite config natively.
37
38	## Step 2: Install Dependencies
39
40	Generate the install command based on detected type:
41
42	```bash
43	# Base (always)
44	pnpm add -D vitest
45
46	# React projects — add jsdom and Testing Library
47	pnpm add -D @vitest/coverage-v8 jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event
48
49	# Workers projects — add Cloudflare test utilities
50	pnpm add -D @vitest/coverage-v8 @cloudflare/vitest-pool-workers
51
52	# Node/Hono projects
53	pnpm add -D @vitest/coverage-v8
54
55	# If migrating from Jest, also remove:
56	pnpm remove jest ts-jest @types/jest jest-environment-jsdom babel-jest
57	```
58
59	Use the project's package manager (check for pnpm-lock.yaml, yarn.lock, bun.lockb, or package-lock.json).
60
61	## Step 3: Generate vitest.config.ts
62
63	### Cloudflare Workers
64
65	```typescript
66	import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
67
68	export default defineWorkersConfig({
69	test: {
70	globals: true,
71	poolOptions: {
72	workers: {
73	wrangler: { configPath: "./wrangler.toml" },
74	},
75	},
76	},
77	});
78	```
79
80	If the project uses the Cloudflare Vite plugin (`@cloudflare/vite-plugin`), integrate into the existing vite.config.ts instead:
81
82	```typescript
83	/// <reference types="vitest/config" />
84	import { defineConfig } from "vite";
85	import { cloudflare } from "@cloudflare/vite-plugin";
86
87	export default defineConfig({
88	plugins: [cloudflare()],
89	test: {
90	globals: true,
91	},
92	});
93	```
94
95	### React (Vite)
96
97	```typescript
98	/// <reference types="vitest/config" />
99	import { defineConfig } from "vite";
100	import react from "@vitejs/plugin-react";
101
102	export default defineConfig({
103	plugins: [react()],
104	test: {
105	globals: true,
106	environment: "jsdom",
107	setupFiles: ["./src/test/setup.ts"],
108	css: true,
109	},
110	});
111	```
112
113	If a vite.config.ts already exists, add the `test` block to it rather than creating a new file.
114
115	### Node / Hono API
116
117	```typescript
118	import { defineConfig } from "vitest/config";
119
120	export default defineConfig({
121	test: {
122	globals: true,
123	environment: "node",
124	},
125	});
126	```
127
128	### With Coverage (add to any config)
129
130	```typescript
131	test: {
132	// ... existing config
133	coverage: {
134	provider: "v8",
135	reporter: ["text", "html", "lcov"],
136	exclude: [
137	"node_modules/",
138	"*/.config.*",
139	"*/.d.ts",
140	"/test/",
141	],
142	},
143	},
144	```
145
146	## Step 4: Generate Test Setup File
147
148	Create `src/test/setup.ts` (React projects only):
149
150	```typescript
151	import "@testing-library/jest-dom/vitest";
152	```
153
154	That single import adds all the custom matchers (toBeInTheDocument, toHaveTextContent, etc.) and registers the Vitest `expect.extend` automatically.
155
156	## Step 5: Add TypeScript Config
157
158	Add to `tsconfig.json` compilerOptions:
159
160	```json
161	{
162	"compilerOptions": {
163	"types": ["vitest/globals"]
164	}
165	}
166	```
167
168	For projects with multiple tsconfig files (e.g. tsconfig.app.json + tsconfig.node.json), add to the one that covers test files — usually the root tsconfig.json or create a tsconfig.test.json that extend

People who liked this also viewed

6 picks

Type