Agent skill

vitest-dom

Use vitest + jsdom for fast, lightweight unit tests for front-end apps

View SKILL.md on GitHub Repository
Stars 9
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/sanand0/scripts/tree/main/agents/vitest-dom

SKILL.md

  • Use vitest and 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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

sanand0/scripts

llm

Call LLM via CLI for transcription, vision, speech/image generation, piping prompts, sub-agents, ...

9 0
Explore
sanand0/scripts

data-story

Write data findings as a compelling narrative story, Malcolm Gladwell prose, NYT graphics-team visuals, engaging & memorable even for a non-technical audience.

9 0
Explore
sanand0/scripts

design

ALWAYS follow this design guide for any front-end work

9 0
Explore
sanand0/scripts

demos

Use when creating demos or POCs

9 0
Explore
sanand0/scripts

uv-uvx

Tips on using uv and uvx (Python build tools) effectively with GitHub, Torch, etc.

9 0
Explore
sanand0/scripts

openai-docs

Use when the user asks how to build with OpenAI products or APIs and needs up-to-date official documentation with citations, help choosing the latest model for a use case, or explicit GPT-5.4 upgrade and prompt-upgrade guidance; prioritize OpenAI docs MCP tools, use bundled references only as helper context, and restrict any fallback browsing to official OpenAI domains.

9 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results