Expert guide for writing and running tests with Vitest, a Vite-native testing framework with Jest compatibility. Covers setup, configuration, test writing, and best practices.
Expert assistant for Vitest (pronounced "veetest"), a next-generation testing framework powered by Vite. This skill helps you set up, configure, and write tests using Vitest with Jest-compatible APIs.
Guides you through:
Add Vitest to your project as a dev dependency:
**npm:**
```bash
npm install -D vitest
```
**yarn:**
```bash
yarn add -D vitest
```
**pnpm:**
```bash
pnpm add -D vitest
```
**bun:**
```bash
bun add -D vitest
```
Update `package.json` to include test scripts:
```json
{
"scripts": {
"test": "vitest",
"coverage": "vitest run --coverage"
}
}
```
Create test files with `.test.js` or `.spec.js` in the filename.
**Example function (sum.js):**
```javascript
export function sum(a, b) {
return a + b
}
```
**Example test (sum.test.js):**
```javascript
import { expect, test } from 'vitest'
import { sum } from './sum.js'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3)
})
```
Execute tests using your package manager:
```bash
npm run test
yarn test
pnpm test
bun run test # Note: use "bun run test", not "bun test"
```
**Run tests once without watch mode:**
```bash
vitest run
```
Vitest reads your Vite configuration by default. You can configure it in three ways:
**Option A: Add to existing vite.config.ts**
```typescript
/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
export default defineConfig({
test: {
// Vitest configuration options
globals: true,
environment: 'node',
// ...
},
})
```
**Option B: Create separate vitest.config.ts (higher priority)**
```typescript
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
// Vitest configuration options
},
})
```
**Option C: Merge with existing Vite config**
```typescript
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config.mjs'
export default mergeConfig(viteConfig, defineConfig({
test: {
// Vitest configuration options
},
}))
```
Run different configurations within the same project:
```typescript
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
projects: [
// Glob patterns for project locations
'packages/*',
'tests/*/vitest.config.{e2e,unit}.ts',
// Or define inline project configs
{
test: {
name: 'happy-dom',
root: './shared_tests',
environment: 'happy-dom',
setupFiles: ['./setup.happy-dom.ts'],
},
},
{
test: {
name: 'node',
root: './shared_tests',
environment: 'node',
setupFiles: ['./setup.node.ts'],
},
},
],
},
})
```
**Common commands:**
```bash
vitest
vitest run
vitest run --coverage
vitest path/to/test.test.ts
vitest --help
```
Install the official VS Code extension for enhanced testing experience:
Vitest will prompt to install missing dependencies automatically. To disable:
```bash
export VITEST_SKIP_INSTALL_CHECKS=1
```
Vitest supports these config file extensions:
(`.json` is NOT supported)
1. **Use unified config:** Prefer single `vite.config.ts` for both Vite and Vitest
2. **Naming convention:** Use `.test.` or `.spec.` in test filenames
3. **Environment variables:** Use `process.env.VITEST` or `mode` property to conditionally apply test-specific config
4. **Separate configs:** If using separate files, remember Vitest config overrides Vite config (doesn't extend)
5. **Package manager note:** When using Bun, always use `bun run test`, not `bun test`
```
✓ sum.test.js (1)
✓ adds 1 + 2 to equal 3
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 02:15:44
Duration 311ms
```
```bash
npm install -D @vitest/coverage-v8
npm install -D @vitest/coverage-istanbul
```
Then run:
```bash
npm run coverage
```
Vitest works with TypeScript out of the box. Just write `.ts` test files and import from `.ts` source files.
Use environment variables in your config:
```typescript
export default defineConfig({
test: {
// Only in CI
...(process.env.CI && {
reporters: ['junit'],
}),
},
})
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/vitest-testing-framework/raw