vitest-v4

Configure, write, and debug Vitest 4 test suites with Vite-native patterns.

Updated Jun 11, 2026
One-click install
npx skills add https://github.com/brillianodhiya/VisionScript --skill vitest-v4-brillianodhiya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vitest-v4
Source: https://github.com/brillianodhiya/VisionScript/tree/main/.agents/skills/vitest-v4
Command: npx skills add https://github.com/brillianodhiya/VisionScript --skill vitest-v4-brillianodhiya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Vitest 4 introduced breaking changes—removed coverage options, deprecated workspace configs, new Browser Mode provider factories, and sealed ESM namespaces—that cause older test setups and AI-generated tests to fail. This Skill provides verified Vitest 4 patterns that prevent hanging runs, broken coverage, mock leakage, and migration errors. ## Core Features & Use Cases - Configuration & Migration: Set up vitest.config.ts with projects, V8/Istanbul coverage via coverage.include, and migrate from Jest or deprecated workspace-style configs. - Type-Safe Mocking: Implement module, function, global, and environment mocks using vi.mock(import(...)), vi.fn, vi.spyOn, and config-driven cleanup with restoreMocks and unstubEnvs. - Browser Mode Testing: Configure Playwright, WebdriverIO, or Preview providers with Vitest 4 factory imports, and write realistic interaction tests using page and userEvent from vitest/browser. - Use Case: After upgrading to Vitest 4, your coverage report misses untested files and browser spies throw errors. Use this Skill to replace removed coverage.all with coverage.include globs and swap vi.spyOn for vi.mock(import('./mod'), { spy: true }). ## Quick Start Ask the AI to create a Vitest 4 config with V8 coverage and a type-safe module mock for your test file, then verify it with npx vitest run.

Frequently Asked Questions about vitest-v4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure vitest.config.ts for Vitest 4?▼

Use defineConfig from 'vitest/config' with a test block specifying environment, coverage provider, and cleanup flags like restoreMocks. For multi-project setups, use the projects array with defineProject instead of deprecated workspace files.

How to mock modules in Vitest with vi.mock?▼

Use vi.mock(import('./module'), factory) for type-safe module mocks, remembering that vi.mock is hoisted before other code runs. For pre-mock state, use vi.hoisted(), and enable restoreMocks and clearMocks in config to prevent leakage between tests.

Does Vitest 4 support coverage.all for untested files?▼

No, Vitest 4 removed coverage.all and coverage.extensions. Use coverage.include with explicit source globs like ['src/**/*.{ts,tsx}'] alongside a provider such as @vitest/coverage-v8 to report on untested files.

Why does vi.spyOn fail in Vitest Browser Mode?▼

Native browser ESM namespace objects are sealed, so vi.spyOn on module exports throws or silently fails in Browser Mode. Use vi.mock(import('./module'), { spy: true }) instead to create spy-enabled module mocks.

Why do Vitest tests hang forever in CI or agent runs?▼

Running vitest without the run subcommand starts watch mode, which never exits in non-interactive environments. Always use vitest run or vitest --no-watch for CI pipelines and agent-driven verification.

When should I use jsdom vs Browser Mode in Vitest?▼

Use jsdom for most component tests and fast DOM assertions. Choose Browser Mode with Playwright or WebdriverIO providers when you need native browser APIs, real event behavior, layout, or screenshot assertions like toMatchScreenshot.