Skip to main content الرئيسية المنشئون 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.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/PramodDutta/qaskills --skill vitest-migration-configيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
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"
