vitest
Assists with unit and integration testing using Vitest, a Vite-native test runner. Use when writing tests, configuring mocks, setting up coverage, or migrating from Jest. Trigger words: vitest, unit testing, test runner, vi.fn, vi.mock, test coverage, jest replacement.
Best use case
vitest is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Assists with unit and integration testing using Vitest, a Vite-native test runner. Use when writing tests, configuring mocks, setting up coverage, or migrating from Jest. Trigger words: vitest, unit testing, test runner, vi.fn, vi.mock, test coverage, jest replacement.
Teams using vitest should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vitest/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vitest Compares
| Feature / Agent | vitest | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Assists with unit and integration testing using Vitest, a Vite-native test runner. Use when writing tests, configuring mocks, setting up coverage, or migrating from Jest. Trigger words: vitest, unit testing, test runner, vi.fn, vi.mock, test coverage, jest replacement.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Vitest
## Overview
Vitest is a Vite-native test runner that provides a Jest-compatible API with native ESM support, instant watch mode via Vite's HMR, and shared Vite configuration for aliases, plugins, and transforms. It serves as a drop-in Jest replacement with significantly faster startup and execution.
## Instructions
- When writing tests, use `describe()` blocks to group related tests, `it()` or `test()` for individual cases, and follow the pattern of naming tests as behavior descriptions (e.g., "should return 404 when user not found").
- When mocking, use `vi.fn()` for function mocks, `vi.mock("./module")` for module mocks, `vi.useFakeTimers()` for timer control, and `vi.setSystemTime()` for date mocking.
- When setting up assertions, use `toBe()` for primitives, `toEqual()` for objects/arrays, and `toMatchInlineSnapshot()` for small expected outputs.
- When configuring, define test settings in `vite.config.ts` under the `test` property or in a separate `vitest.config.ts`, choosing the appropriate environment (`jsdom`, `happy-dom`, `node`).
- When measuring coverage, use `@vitest/coverage-v8` with `vitest --coverage` and set minimum thresholds in CI with `--coverage.thresholds.lines=80`.
- When testing in browsers, use `@vitest/browser` with Playwright or WebDriverIO providers for real DOM testing instead of jsdom simulation.
- When working in monorepos, use `vitest.workspace.ts` for multi-project configuration that shares common settings.
## Examples
### Example 1: Test a service with API mocking
**User request:** "Write Vitest tests for a user service that calls an external API"
**Actions:**
1. Mock the HTTP module with `vi.mock()` to intercept API calls
2. Write tests for success, error, and edge cases using `describe` and `it`
3. Assert responses with `toEqual()` and error handling with `toThrow()`
4. Use `beforeEach` with `vi.clearAllMocks()` for test isolation
**Output:** Isolated unit tests for the user service with mocked external dependencies.
### Example 2: Migrate from Jest to Vitest
**User request:** "Switch our test suite from Jest to Vitest"
**Actions:**
1. Install `vitest` and add test config to `vite.config.ts`
2. Replace `jest.fn()` with `vi.fn()` and `jest.mock()` with `vi.mock()`
3. Update `package.json` scripts to use `vitest` and `vitest --coverage`
4. Remove `ts-jest`, `babel-jest`, and Jest config files
**Output:** A Vitest-powered test suite with the same tests running faster with native ESM support.
## Guidelines
- Use `describe` blocks to group related tests; keep individual tests focused on one behavior.
- Prefer `toEqual()` for objects/arrays and `toBe()` for primitives.
- Mock external dependencies (HTTP, database), not internal modules; test real integration where possible.
- Use `beforeEach` for test isolation, not `beforeAll`; shared state between tests causes flaky results.
- Name tests as behavior descriptions: "should return 404 when user not found", not "test getUserById".
- Use inline snapshots for small expected outputs; file snapshots for large/complex structures.
- Run `vitest --coverage` in CI with a minimum threshold: `--coverage.thresholds.lines=80`.Related Skills
wxt
Build cross-browser extensions with WXT — the modern framework for Chrome, Firefox, Safari, and Edge extensions. Use when someone asks to "build a browser extension", "Chrome extension with React", "WXT framework", "cross- browser extension", "manifest v3 extension", "build Firefox extension", or "browser extension with TypeScript". Covers content scripts, background workers, popup/options pages, storage, messaging, and publishing.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
vite
Assists with configuring and using Vite as a frontend build tool for modern web applications. Use when setting up dev servers, optimizing production builds, configuring plugins, migrating from Webpack or CRA, or building component libraries. Trigger words: vite, build tool, HMR, hot module replacement, vite config, rollup, bundling.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
testing-library
Test UI components the way users interact with them using Testing Library — query by role, text, and label instead of implementation details. Use when someone asks to "test React components", "Testing Library", "user-centric testing", "test accessibility", "test without implementation details", or "render and query components in tests". Covers React Testing Library, queries, user events, async testing, and accessibility assertions.
tailwindcss
Build UIs with Tailwind CSS — utility classes, responsive design, dark mode, custom configuration, component patterns, animations, plugins, and design system setup. Use when tasks involve styling web applications, configuring design tokens, building responsive layouts, or migrating from other CSS approaches.
skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
security-audit
Scan code for security vulnerabilities, misconfigurations, and exposed secrets. Use when a user asks to audit security, find vulnerabilities, check for OWASP issues, scan for secrets, review dependencies for CVEs, detect SQL injection, find XSS vulnerabilities, or harden an application. Covers OWASP Top 10, dependency auditing, secrets detection, and generates fix recommendations with severity ratings.
playwright-testing
Write and maintain end-to-end tests with Playwright. Use when someone asks to "add e2e tests", "test my web app", "set up Playwright", "write browser tests", "test login flow", "visual regression testing", "test across browsers", or "automate UI testing". Covers test setup, page objects, authentication, API mocking, visual comparisons, and CI integration.