From vitest
Configures Vitest for Vite projects with workspace setups, test environments (node/jsdom), coverage (v8/istanbul), performance pools, reporters, and mock options. Use for JS/TS testing setups.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vitest:vitest-configurationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Master Vitest configuration, Vite integration, workspace setup, and test environment configuration for modern testing. This skill covers comprehensive configuration strategies for Vitest, the blazing-fast unit test framework powered by Vite.
Master Vitest configuration, Vite integration, workspace setup, and test environment configuration for modern testing. This skill covers comprehensive configuration strategies for Vitest, the blazing-fast unit test framework powered by Vite.
npm install -D vitest
# or
yarn add -D vitest
# or
pnpm add -D vitest
# UI for vitest
npm install -D @vitest/ui
# Browser mode
npm install -D @vitest/browser playwright
# Coverage
npm install -D @vitest/coverage-v8
# or
npm install -D @vitest/coverage-istanbul
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
// Test environment
environment: 'node', // 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime'
// Global test files
globals: true,
setupFiles: ['./vitest.setup.ts'],
// Include/exclude patterns
include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
// Coverage configuration
coverage: {
provider: 'v8', // 'v8' | 'istanbul'
reporter: ['text', 'json', 'html'],
include: ['src/**/*.{js,ts,jsx,tsx}'],
exclude: [
'node_modules/',
'src/**/*.test.{js,ts,jsx,tsx}',
'src/**/*.spec.{js,ts,jsx,tsx}',
'src/**/__tests__/**'
],
thresholds: {
lines: 80,
functions: 80,
branches: 80,
statements: 80
}
},
// Performance
pool: 'threads', // 'threads' | 'forks' | 'vmThreads'
poolOptions: {
threads: {
singleThread: false,
minThreads: 1,
maxThreads: 4
}
},
// Timeouts
testTimeout: 10000,
hookTimeout: 10000,
// Watch options
watch: false,
watchExclude: ['**/node_modules/**', '**/dist/**'],
// Reporters
reporters: ['default'],
// Mock options
mockReset: true,
restoreMocks: true,
clearMocks: true
}
});
import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config';
export default mergeConfig(
viteConfig,
defineConfig({
test: {
// Vitest-specific configuration
}
})
);
// vitest.workspace.ts
import { defineWorkspace } from 'vitest/config';
export default defineWorkspace([
// Multiple projects
{
extends: './vitest.config.ts',
test: {
name: 'unit',
include: ['src/**/*.test.ts'],
environment: 'node'
}
},
{
extends: './vitest.config.ts',
test: {
name: 'browser',
include: ['src/**/*.browser.test.ts'],
environment: 'jsdom'
}
},
{
extends: './vitest.config.ts',
test: {
name: 'integration',
include: ['tests/integration/**/*.test.ts'],
environment: 'node'
}
}
]);
// vitest.config.ts
export default defineConfig({
test: {
environment: 'node',
environmentOptions: {
// Node-specific options
}
}
});
// vitest.config.ts
export default defineConfig({
test: {
environment: 'jsdom',
environmentOptions: {
jsdom: {
resources: 'usable',
url: 'http://localhost:3000'
}
}
}
});
// vitest.config.ts
export default defineConfig({
test: {
environment: 'happy-dom',
environmentOptions: {
happyDOM: {
width: 1024,
height: 768
}
}
}
});
// custom-environment.ts
import type { Environment } from 'vitest';
export default <Environment>{
name: 'custom',
transformMode: 'ssr',
setup() {
// Setup custom environment
return {
teardown() {
// Cleanup
}
};
}
};
// vitest.config.ts
export default defineConfig({
test: {
environment: './custom-environment.ts'
}
});
import { expect, afterEach, vi } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';
// Extend Vitest matchers
expect.extend(matchers);
// Cleanup after each test
afterEach(() => {
cleanup();
});
// Mock global objects
global.fetch = vi.fn();
// Setup global test utilities
global.testUtils = {
// Custom test utilities
};
// Configure test environment
beforeAll(() => {
// Global setup
});
afterAll(() => {
// Global teardown
});
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import * as matchers from '@testing-library/jest-dom/matchers';
expect.extend(matchers);
afterEach(() => {
cleanup();
});
// Mock window.matchMedia
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(),
removeListener: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn()
}))
});
export default defineConfig({
test: {
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html', 'lcov'],
reportsDirectory: './coverage',
include: ['src/**/*.ts'],
exclude: [
'**/*.test.ts',
'**/*.spec.ts',
'**/types/**',
'**/*.d.ts'
],
thresholds: {
lines: 80,
functions: 80,
branches: 80,
statements: 80,
perFile: true
},
all: true,
clean: true,
cleanOnRerun: true
}
}
});
export default defineConfig({
test: {
coverage: {
provider: 'istanbul',
reporter: ['text', 'json', 'html'],
watermarks: {
lines: [80, 95],
functions: [80, 95],
branches: [80, 95],
statements: [80, 95]
}
}
}
});
import { defineConfig } from 'vitest/config';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@utils': path.resolve(__dirname, './src/utils'),
'@hooks': path.resolve(__dirname, './src/hooks'),
'@services': path.resolve(__dirname, './src/services')
}
},
test: {
// Test configuration
}
});
export default defineConfig({
test: {
// Don't externalize these packages
deps: {
inline: ['package-to-inline']
},
// Externalize these packages
server: {
deps: {
external: ['package-to-external']
}
}
}
});
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:run": "vitest run",
"test:coverage": "vitest run --coverage",
"test:watch": "vitest watch",
"test:ci": "vitest run --coverage --reporter=json --reporter=default"
}
}
export default defineConfig({
test: {
browser: {
enabled: true,
name: 'chrome', // 'chrome' | 'firefox' | 'safari'
provider: 'playwright', // 'playwright' | 'webdriverio'
headless: true,
screenshotFailures: true
}
}
});
export default defineConfig({
test: {
// Use threads for parallel execution
pool: 'threads',
poolOptions: {
threads: {
singleThread: false,
minThreads: 1,
maxThreads: 4,
useAtomics: true
}
},
// Isolate tests
isolate: true,
// Sequence tests
sequence: {
shuffle: false,
concurrent: false
},
// File parallelism
fileParallelism: true,
// Max concurrency
maxConcurrency: 5,
// Bail on failure
bail: 1
}
});
export default defineConfig({
test: {
typecheck: {
enabled: true,
checker: 'tsc', // 'tsc' | 'vue-tsc'
tsconfig: './tsconfig.json',
include: ['**/*.{test,spec}-d.ts']
}
}
});
npx claudepluginhub thebushidocollective/han --plugin vitestConfigures Vitest with workspaces, environments (node, jsdom, happy-dom), coverage, TypeScript integration, and snapshot settings.
Guides Vitest testing for TypeScript/JavaScript projects: installation, config, running tests with watch/UI/coverage, assertions, and mocking.
Vitest testing framework conventions and practices. Invoke whenever task involves any interaction with Vitest — writing tests, configuring vitest.config.ts, mocking modules, debugging test failures, snapshots, coverage, or migrating from Jest.