Vitest
Configure Vitest for Nuxt and Node projects with the right DOM environment, multi-project splits, and TypeScript type tests.
Overview
Vitest is an agent skill for the Ship phase that documents advanced Vitest configuration—environments, multi-project layouts, custom runtimes, and type testing—for Nuxt and modern frontend stacks.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill vitestWhat is this skill?
- Documents four built-in test environments: node, jsdom, happy-dom, and edge-runtime
- Shows per-file @vitest-environment overrides and jsdom environmentOptions
- Splits unit vs DOM suites with named Vitest projects in one config
- Custom vitest-environment packages with setup/teardown hooks
- Type-level testing via .test-d.ts files and expectTypeOf API
- Four documented test environments: node, jsdom, happy-dom, edge-runtime
Adoption & trust: 2k installs on skills.sh; 674 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know you should test with Vitest but your config breaks on DOM APIs, mixed unit/UI folders, or TypeScript types that runtime tests never catch.
Who is it for?
Indie devs adding or fixing Vitest in a Nuxt/Vite repo who need jsdom vs node clarity and optional expectTypeOf coverage.
Skip if: Teams that only need E2E browser automation (Playwright/Cypress) with no unit layer, or backends tested exclusively with Jest outside the Vitest ecosystem.
When should I use this skill?
Setting up or debugging Vitest environments, multi-project configs, custom environments, or TypeScript type tests in a Nuxt/Vite codebase.
What do I get? / Deliverables
You leave with copy-paste config patterns for environments, projects, and type tests so CI and local runs match how your app actually executes.
- defineConfig snippets for environments and projects
- Per-file or custom environment patterns
- Type test file examples using expectTypeOf
Recommended Skills
Journey fit
Automated tests and type checks belong in the ship phase before release, even when you write tests during build. Covers unit/DOM environments, per-file overrides, projects layout, custom environments, and expectTypeOf—core testing workflow setup.
How it compares
Reference skill for Vitest config knobs—not a replacement for your test runner or a hosted QA platform.
Common Questions / FAQ
Who is vitest for?
Solo and small-team frontend builders using Vitest with Nuxt or Vite who want agent-guided setup for DOM environments, project splits, and type tests.
When should I use vitest?
During ship/testing when configuring environments before CI, splitting unit and DOM suites, or adding .test-d.ts type coverage after build changes.
Is vitest safe to install?
Treat it as community procedural docs—review the Security Audits panel on this Prism page and your repo’s skill source before enabling agent auto-run.
SKILL.md
READMESKILL.md - Vitest
# Advanced ## Test Environments Available: `node` (default), `jsdom`, `happy-dom`, `edge-runtime` ```ts defineConfig({ test: { environment: 'jsdom', environmentOptions: { jsdom: { url: 'http://localhost' }, }, }, }) ``` Install packages: ```bash npm i -D jsdom # Full browser simulation npm i -D happy-dom # Faster, fewer APIs ``` Per-file environment: ```ts // @vitest-environment jsdom test('DOM test', () => { const div = document.createElement('div') expect(div).toBeInstanceOf(HTMLDivElement) }) ``` Multiple environments via projects: ```ts defineConfig({ test: { projects: [ { test: { name: 'unit', include: ['tests/unit/**'], environment: 'node' } }, { test: { name: 'dom', include: ['tests/dom/**'], environment: 'jsdom' } }, ], }, }) ``` ### Custom Environment ```ts // vitest-environment-custom/index.ts import type { Environment } from 'vitest/runtime' export default <Environment>{ name: 'custom', viteEnvironment: 'ssr', setup() { globalThis.myGlobal = 'value' return { teardown() { delete globalThis.myGlobal }, } }, } ``` ## Type Testing Test TypeScript types with `.test-d.ts` files: ```ts // math.test-d.ts import { expectTypeOf } from 'vitest' import { add } from './math' test('add returns number', () => { expectTypeOf(add).returns.toBeNumber() }) ``` ### expectTypeOf API ```ts // Basic types expectTypeOf<string>().toBeString() expectTypeOf<number>().toBeNumber() expectTypeOf<boolean>().toBeBoolean() expectTypeOf<null>().toBeNull() expectTypeOf<undefined>().toBeUndefined() expectTypeOf<never>().toBeNever() expectTypeOf<any>().toBeAny() expectTypeOf<unknown>().toBeUnknown() expectTypeOf<[]>().toBeArray() expectTypeOf<Function>().toBeFunction() // Value types const value = 'hello' expectTypeOf(value).toBeString() expectTypeOf(obj).toMatchTypeOf<{ name: string }>() expectTypeOf(obj).toHaveProperty('name') // Functions expectTypeOf(greet).parameters.toEqualTypeOf<[string]>() expectTypeOf(greet).returns.toBeString() expectTypeOf(greet).parameter(0).toBeString() // Equality expectTypeOf<B>().toMatchTypeOf<A>() // Subset matching expectTypeOf<A>().toEqualTypeOf<B>() // Exact match expectTypeOf<A>().not.toEqualTypeOf<B>() // Nullable expectTypeOf<string | null>().toBeNullable() ``` ### assertType ```ts import { assertType } from 'vitest' // @ts-expect-error - should fail type check assertType<string>(result) assertType<User | null>(result) // Correct ``` Run: `vitest typecheck` or `vitest --typecheck` ## Projects (Workspaces) ```ts defineConfig({ test: { projects: [ 'packages/*', // Glob for package configs { test: { name: 'unit', include: ['tests/unit/**/*.test.ts'], environment: 'node', }, }, ], }, }) ``` ### Providing Values ```ts defineConfig({ test: { projects: [ { test: { name: 'staging', provide: { apiUrl: 'https://staging.api.com' }, }, }, ], }, }) // In tests import { inject } from 'vitest' const url = inject('apiUrl') ``` ### Running Specific Projects ```bash vitest --project unit vitest --project unit --project e2e vitest --project.ignore browser ``` ## Browser Mode Real browser testing (separate from environments): ```ts defineConfig({ test: { browser: { enabled: true, name: 'chromium', // or 'firefox', 'webkit' provider: 'playwright', }, }, }) ``` ## CSS in Tests ```ts defineConfig({ test: { css: true, // Or with options css: { include: /\.module\.css$/, modules: { classNameStrategy: 'non-scoped' }, }, }, }) ``` ## External Dependencies Fix deps that fail with CSS/asset errors: ```ts defineConfig({ test: { server: { deps: { inline: ['problematic-package'], }, }, }, }) ``` ## Global Setup ```ts defineConfig({ test: { globalSetup: ['./tests/global-setu