- Use vitest and jsdom for front-end testing.
- Avoid
vitest.config.*; default ESM import works, launch via"test": "npx -y vitest run"inpackage.json. Addjsdomas adevDependency. Addnpm testtoprepublishOnly - Treat tests as lightweight integration, not unit. Load the full HTML + scripts and verify real DOM mutations; ensures refactors don't silently break UI wiring.
- Log browser
console.*output. - Mount local HTML.
settings.fetch.virtualServers = [{url:"https://test/", directory: <root>}]. Usepage.goto("https://test/...")to load files without a dev-server. - Create a fresh page for each test to isolate
window,document, etc. - Fake timers for deterministic testing.
- Call
vi.useFakeTimers()inbeforeAll,vi.useRealTimers()inafterAll. - Re-bind
window.setTimeout = setTimeoutso app code sees the mocked clock. - Drive async paths with
vi.advanceTimersByTime(ms)instead ofawait sleep.
- Call
- Stub external APIs with
vi.fn()- e.g.window.fetch = vi.fn(() => Promise.resolve({ok:true,...}))avoids network and lets you assert payloads. - Spy on side-effects -
vi.spyOn(console, "error"), clipboard reads, etc.; alwaysmockRestore()afterwards to prevent bleed-through. - Add timeouts per test case, e.g.
{ timeout: 10_000 }, for long-running tests.
Vitest Dom
Use vitest + jsdom for fast, lightweight unit tests for front-end apps
majiayu000 Updated Vitest Dom by majiayu000 · d7c73ce
npx skillmds@latest add majiayu000/vitest-dom File contents
---name: vitest-domdescription: Use vitest + jsdom for fast, lightweight unit tests for front-end apps---
- Use [vitest](http://npmjs.com/package/vitest) and [jsdom](https://www.npmjs.com/package/jsdom) for front-end testing.
- Avoid `vitest.config.*`; default ESM import works, launch via `"test": "npx -y vitest run"` in `package.json`. Add `jsdom` as a `devDependency`. Add `npm test` to `prepublishOnly`
- Treat tests as lightweight integration, not unit. Load the full HTML + scripts and verify real DOM mutations; ensures refactors don't silently break UI wiring.
- Log browser `console.*` output.
- Mount local HTML. `settings.fetch.virtualServers = [{url:"https://test/", directory: <root>}]`. Use `page.goto("https://test/...")` to load files without a dev-server.
- Create a fresh page for each test to isolate `window`, `document`, etc.
- Fake timers for deterministic testing.
- Call `vi.useFakeTimers()` in `beforeAll`, `vi.useRealTimers()` in `afterAll`.
- Re-bind `window.setTimeout = setTimeout` so app code sees the mocked clock.
- Drive async paths with `vi.advanceTimersByTime(ms)` instead of `await sleep`.
- Stub external APIs with `vi.fn()` - e.g. `window.fetch = vi.fn(() => Promise.resolve({ok:true,...}))` avoids network and lets you assert payloads.
- Spy on side-effects - `vi.spyOn(console, "error")`, clipboard reads, etc.; always `mockRestore()` afterwards to prevent bleed-through.
- Add timeouts per test case, e.g. `{ timeout: 10_000 }`, for long-running tests.
majiayu000/claude-skill-registry-data/tree/main/data/vitest-dom commit d7c73ce189
Frequently asked questions
Run npx skillmds@latest add majiayu000/vitest-dom in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Use vitest + jsdom for fast, lightweight unit tests for front-end apps It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.