Skip to main content Home Creators pramoddutta qaskills vitest-migration-config
vitest-migration-config Teaches the agent to migrate a Jest suite to Vitest — vi.mock and the globals shim, vitest.config workspaces/projects, coverage, browser mode, and Vitest v4 breaking changes.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/PramodDutta/qaskills --skill vitest-migration-configThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Use when publishing SEO blog articles to qaskills.sh, e.g. "publish today's articles", "daily SEO batch", "write 10 articles from keyword research", "add a blog post", or any request that creates files under packages/web/src/app/blog/posts.
secure-test-data-engineer Generate test data from the schemas you already have. Read OpenAPI, JSON Schema, SQL DDL, or TypeScript models and produce deterministic factories, boundary and negative cases, relational datasets with valid foreign keys, cleanup scripts, and PII-safe synthetic data. Production records never leave the machine.
Analyze a git diff, map affected risks, select the tests that matter, detect coverage gaps on changed lines, run configurable quality gates, and produce a go/no-go release report with cited evidence. Recommends only; never merges or deploys.
Related occupations SOC
Based on SOC occupation classification
name Vitest Migration & Config description Teaches the agent to migrate a Jest suite to Vitest — vi.mock and the globals shim, vitest.config workspaces/projects, coverage, browser mode, and Vitest v4 breaking changes. version 1.0.0 author thetestingacademy license MIT tags ["vitest","migration","jest","vi-mock","config","coverage","browser-mode","projects"] testingTypes ["unit","integration"] frameworks ["vitest","jest"] languages ["typescript"] domains ["web","api"] agents ["claude-code","cursor","github-copilot","windsurf","codex","aider","continue","cline","zed","bolt","gemini-cli","amp"]
Vitest Migration & Config
This skill makes the agent migrate a Jest test suite to Vitest correctly and configure Vitest from scratch. Vitest is mostly Jest-compatible, but the differences bite: the vi namespace replaces jest, vi.mock hoisting needs vi.hoisted, ESM is first-class, and Vitest v4 removed workspace files in favor of inline projects. The agent should produce a config that runs fast, types cleanly, and reports coverage.
Use this skill when migrating from Jest, setting up vitest.config.ts, splitting unit vs browser tests, or resolving v4 upgrade breakage.
Core Principles
vi replaces jest.jest.fn -> vi.fn, jest.mock -> vi.mock, jest.spyOn -> vi.spyOn, jest.useFakeTimers -> vi.useFakeTimers. The assertion API (expect, matchers) is unchanged.Mocks must reset explicitly. Set test.clearMocks/restoreMocks in config or call vi.clearAllMocks() in beforeEach — Vitest does not reset by default.vi.mock is hoisted; use vi.hoisted for shared values.vi.hoisted(() => ...), since the factory runs before imports.Decide on globals up front. Either enable globals: true (Jest-like, no imports) or import { describe, it, expect, vi } from vitest. Pick one and add types: ['vitest/globals'] if using globals.v4 uses projects, not workspace. The standalone vitest.workspace.ts file is removed; declare multiple environments via the inline projects array.Browser mode replaces jsdom for real-DOM tests. Use browser.instances (v4) to run component tests in a real browser engine via Playwright.
Workflow / Patterns
Pattern 1 — Mechanical Jest -> Vitest swap
Most test bodies migrate with a namespace rename. With
globals: true
import { describe, it, expect, vi, beforeEach } from 'vitest' ;
describe ('cart' , () => {
beforeEach (() => vi.clearAllMocks ());
it ('adds an item' , () => {
const onChange = vi.fn ();
const cart = createCart (onChange);
cart.add ({ sku : 'A1' , qty : 2 });
expect (cart.total ).toBe (2 );
expect (onChange).toHaveBeenCalledWith (expect.objectContaining ({ sku : 'A1' }));
});
});
Pattern 2 — vi.mock with vi.hoisted (the hoisting fix) In Jest you prefix variables with mock. In Vitest, wrap them in vi.hoisted so they exist when the hoisted factory runs.
import { vi, test, expect, beforeEach } from 'vitest' ;
import { getUser } from './user-service' ;
import axios from 'axios' ;
const { mockGet } = vi.hoisted (() => ({ mockGet : vi.fn () }));
vi.mock ('axios' , () => ({
default : { get : mockGet },
}));
beforeEach (() => vi.clearAllMocks ());
test ('resolves user from API' , async () => {
mockGet.mockResolvedValue ({ data : { id : 1 , name : 'Ada' } });
const user = await getUser (1 );
expect (user).toEqual ({ id : 1 , name : 'Ada' });
expect (axios.get ).toHaveBeenCalledWith ('/api/users/1' );
});
Pattern 3 — Partial mock with importActual The Vitest equivalent of jest.requireActual. The factory is async.
vi.mock ('./config' , async (importOriginal) => {
const actual = await importOriginal<typeof import ('./config' )>();
return {
...actual,
isProduction : vi.fn (() => false ),
};
});
Pattern 4 — A complete vitest.config.ts Covers globals, environment, setup files, and coverage. This replaces jest.config.js.
import { defineConfig } from 'vitest/config' ;
export default defineConfig ({
test : {
globals : true ,
environment : 'node' ,
setupFiles : ['./test/setup.ts' ],
clearMocks : true ,
restoreMocks : true ,
coverage : {
provider : 'v8' ,
reporter : ['text' , 'html' , 'lcov' ],
include : ['src/**/*.ts' ],
exclude : ['src/**/*.d.ts' , 'src/**/index.ts' ],
thresholds : { lines : 80 , functions : 80 , branches : 75 },
},
},
});
If using globals: true, add to tsconfig.json:
{ "compilerOptions" : { "types" : [ "vitest/globals" ] } }
Pattern 5 — Multiple environments via projects (v4) The v4 replacement for vitest.workspace.ts. Run Node unit tests and jsdom component tests in one command, each with its own config.
import { defineConfig } from 'vitest/config' ;
export default defineConfig ({
test : {
coverage : { provider : 'v8' },
projects : [
{
test : {
name : 'unit' ,
environment : 'node' ,
include : ['src/**/*.unit.test.ts' ],
},
},
{
test : {
name : 'dom' ,
environment : 'jsdom' ,
setupFiles : ['./test/dom-setup.ts' ],
include : ['src/**/*.dom.test.ts' ],
},
},
],
},
});
Pattern 6 — Browser mode (real engine, v4 instances) For component tests that need a real browser. v4 replaced the singular browser.name with a browser.instances array.
import { defineConfig } from 'vitest/config' ;
export default defineConfig ({
test : {
browser : {
enabled : true ,
provider : 'playwright' ,
headless : true ,
instances : [
{ browser : 'chromium' },
{ browser : 'firefox' },
],
},
},
});
import { render } from 'vitest-browser-react' ;
import { expect, test } from 'vitest' ;
import { Counter } from './Counter' ;
test ('increments in a real browser' , async () => {
const screen = render (<Counter /> await screen.getByRole ('button' , { name : 'Increment' }).click ();
await expect.element (screen.getByText ('Count: 1' )).toBeVisible ();
});
Pattern 7 — package.json scripts and the runner {
"scripts" : {
"test" : "vitest run" ,
"test:watch" : "vitest" ,
"test:ui" : "vitest --ui" ,
"coverage" : "vitest run --coverage"
}
}
Best Practices
Choose globals vs imports once and apply it suite-wide. If globals: true, add types: ['vitest/globals'] so TypeScript knows expect/vi.Set clearMocks and restoreMocks in config — Vitest does not auto-reset, so omitting them recreates Jest's "leaky mock" bug.Use vi.hoisted for any value a vi.mock factory references. This is the single most common migration failure.Mock ESM default exports as { default: ... } in the factory — the shape differs from Jest's CJS interop.Use the v8 coverage provider for speed; reserve istanbul only if you need its specific report nuances.Split slow DOM/browser tests into a separate project so the fast Node unit tests give quick feedback.On v4 upgrade, replace vitest.workspace.ts with inline projects and convert browser.name to browser.instances.
Anti-Patterns
Search-replacing jest -> vi and assuming you're done. Mock hoisting and ESM default shapes still need vi.hoisted and { default }.Forgetting mocks reset because Vitest, unlike a default Jest setup, won't clear them for you.Referencing an outer variable in vi.mock without vi.hoisted. It is undefined when the hoisted factory executes.Keeping vitest.workspace.ts on v4. It is removed; the suite silently ignores it or errors. Use projects.Enabling globals: true but not adding vitest/globals types , producing a flood of "cannot find name 'expect'" TS errors.Running everything in jsdom when most tests are pure logic — jsdom is slower and unnecessary. Default to node.Mixing @jest/globals imports into Vitest files — import from vitest instead.
When to Trigger This Skill
"Migrate my Jest tests to Vitest"
"Set up vitest.config.ts" / "configure Vitest coverage"
"vi.mock isn't working / variable is undefined in the factory"
"How do I mock a default ESM export in Vitest?"
"Run component tests in a real browser with Vitest"
"Vitest v4 broke my workspace / browser.name config"
"Split unit and DOM tests into projects"
"Jest requireActual equivalent in Vitest"
