Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .agents/skills/vitest/GENERATION.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Generation Info

- **Source:** `sources/vitest`
- **Git SHA:** `4a7321e10672f00f0bb698823a381c2cc245b8f7`
- **Generated:** 2026-01-28
52 changes: 52 additions & 0 deletions .agents/skills/vitest/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
name: vitest
description: Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
metadata:
author: Anthony Fu
version: "2026.1.28"
source: Generated from https://github.com/vitest-dev/vitest, scripts located at https://github.com/antfu/skills
---

Vitest is a next-generation testing framework powered by Vite. It provides a Jest-compatible API with native ESM, TypeScript, and JSX support out of the box. Vitest shares the same config, transformers, resolvers, and plugins with your Vite app.

**Key Features:**
- Vite-native: Uses Vite's transformation pipeline for fast HMR-like test updates
- Jest-compatible: Drop-in replacement for most Jest test suites
- Smart watch mode: Only reruns affected tests based on module graph
- Native ESM, TypeScript, JSX support without configuration
- Multi-threaded workers for parallel test execution
- Built-in coverage via V8 or Istanbul
- Snapshot testing, mocking, and spy utilities

> The skill is based on Vitest 3.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Vitest and Vite config integration, defineConfig usage | [core-config](references/core-config.md) |
| CLI | Command line interface, commands and options | [core-cli](references/core-cli.md) |
| Test API | test/it function, modifiers like skip, only, concurrent | [core-test-api](references/core-test-api.md) |
| Describe API | describe/suite for grouping tests and nested suites | [core-describe](references/core-describe.md) |
| Expect API | Assertions with toBe, toEqual, matchers and asymmetric matchers | [core-expect](references/core-expect.md) |
| Hooks | beforeEach, afterEach, beforeAll, afterAll, aroundEach | [core-hooks](references/core-hooks.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Mocking | Mock functions, modules, timers, dates with vi utilities | [features-mocking](references/features-mocking.md) |
| Snapshots | Snapshot testing with toMatchSnapshot and inline snapshots | [features-snapshots](references/features-snapshots.md) |
| Coverage | Code coverage with V8 or Istanbul providers | [features-coverage](references/features-coverage.md) |
| Test Context | Test fixtures, context.expect, test.extend for custom fixtures | [features-context](references/features-context.md) |
| Concurrency | Concurrent tests, parallel execution, sharding | [features-concurrency](references/features-concurrency.md) |
| Filtering | Filter tests by name, file patterns, tags | [features-filtering](references/features-filtering.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Vi Utilities | vi helper: mock, spyOn, fake timers, hoisted, waitFor | [advanced-vi](references/advanced-vi.md) |
| Environments | Test environments: node, jsdom, happy-dom, custom | [advanced-environments](references/advanced-environments.md) |
| Type Testing | Type-level testing with expectTypeOf and assertType | [advanced-type-testing](references/advanced-type-testing.md) |
| Projects | Multi-project workspaces, different configs per project | [advanced-projects](references/advanced-projects.md) |
264 changes: 264 additions & 0 deletions .agents/skills/vitest/references/advanced-environments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
---
name: test-environments
description: Configure environments like jsdom, happy-dom for browser APIs
---

# Test Environments

## Available Environments

- `node` (default) - Node.js environment
- `jsdom` - Browser-like with DOM APIs
- `happy-dom` - Faster alternative to jsdom
- `edge-runtime` - Vercel Edge Runtime

## Configuration

```ts
// vitest.config.ts
defineConfig({
test: {
environment: 'jsdom',

// Environment-specific options
environmentOptions: {
jsdom: {
url: 'http://localhost',
},
},
},
})
```

## Installing Environment Packages

```bash
# jsdom
npm i -D jsdom

# happy-dom (faster, fewer APIs)
npm i -D happy-dom
```

## Per-File Environment

Use magic comment at top of file:

```ts
// @vitest-environment jsdom

import { expect, test } from 'vitest'

test('DOM test', () => {
const div = document.createElement('div')
expect(div).toBeInstanceOf(HTMLDivElement)
})
```

## jsdom Environment

Full browser environment simulation:

```ts
// @vitest-environment jsdom

test('DOM manipulation', () => {
document.body.innerHTML = '<div id="app"></div>'

const app = document.getElementById('app')
app.textContent = 'Hello'

expect(app.textContent).toBe('Hello')
})

test('window APIs', () => {
expect(window.location.href).toBeDefined()
expect(localStorage).toBeDefined()
})
```

### jsdom Options

```ts
defineConfig({
test: {
environmentOptions: {
jsdom: {
url: 'http://localhost:3000',
html: '<!DOCTYPE html><html><body></body></html>',
userAgent: 'custom-agent',
resources: 'usable',
},
},
},
})
```

## happy-dom Environment

Faster but fewer APIs:

```ts
// @vitest-environment happy-dom

test('basic DOM', () => {
const el = document.createElement('div')
el.className = 'test'
expect(el.className).toBe('test')
})
```

## Multiple Environments per Project

Use projects for different environments:

```ts
defineConfig({
test: {
projects: [
{
test: {
name: 'unit',
include: ['tests/unit/**/*.test.ts'],
environment: 'node',
},
},
{
test: {
name: 'dom',
include: ['tests/dom/**/*.test.ts'],
environment: 'jsdom',
},
},
],
},
})
```

## Custom Environment

Create custom environment package:

```ts
// vitest-environment-custom/index.ts
import type { Environment } from 'vitest/runtime'

export default <Environment>{
name: 'custom',
viteEnvironment: 'ssr', // or 'client'

setup() {
// Setup global state
globalThis.myGlobal = 'value'

return {
teardown() {
delete globalThis.myGlobal
},
}
},
}
```

Use with:

```ts
defineConfig({
test: {
environment: 'custom',
},
})
```

## Environment with VM

For full isolation:

```ts
export default <Environment>{
name: 'isolated',
viteEnvironment: 'ssr',

async setupVM() {
const vm = await import('node:vm')
const context = vm.createContext()

return {
getVmContext() {
return context
},
teardown() {},
}
},

setup() {
return { teardown() {} }
},
}
```

## Browser Mode (Separate from Environments)

For real browser testing, use Vitest Browser Mode:

```ts
defineConfig({
test: {
browser: {
enabled: true,
name: 'chromium', // or 'firefox', 'webkit'
provider: 'playwright',
},
},
})
```

## CSS and Assets

In jsdom/happy-dom, configure CSS handling:

```ts
defineConfig({
test: {
css: true, // Process CSS

// Or with options
css: {
include: /\.module\.css$/,
modules: {
classNameStrategy: 'non-scoped',
},
},
},
})
```

## Fixing External Dependencies

If external deps fail with CSS/asset errors:

```ts
defineConfig({
test: {
server: {
deps: {
inline: ['problematic-package'],
},
},
},
})
```

## Key Points

- Default is `node` - no browser APIs
- Use `jsdom` for full browser simulation
- Use `happy-dom` for faster tests with basic DOM
- Per-file environment via `// @vitest-environment` comment
- Use projects for multiple environment configurations
- Browser Mode is for real browser testing, not environment

<!--
Source references:
- https://vitest.dev/guide/environment.html
-->
Loading
Loading