vitest-dom

What problem does it solve?

This Skill streamlines front-end testing by providing a robust methodology for using Vitest and JSDOM, ensuring fast, lightweight, and reliable unit tests that catch UI wiring issues early. It helps developers build confidence in their UI components.

Core Features & Use Cases

• Lightweight Integration Tests: Treat tests as integration points, loading full HTML and scripts to verify real DOM mutations, ensuring refactors don't silently break UI.
• Deterministic Testing: Utilize fake timers (vi.useFakeTimers()) and fresh pages for isolated, predictable test environments, eliminating flaky tests.
• API Stubbing & Spying: Easily mock external APIs (window.fetch = vi.fn()) and spy on side-effects (vi.spyOn(console, "error")) to control test conditions and assert behavior.
• Use Case: Automatically generate Vitest tests for a new JavaScript component, ensuring all DOM interactions and API calls are correctly mocked and verified, providing immediate feedback on UI functionality.

Quick Start

Write Vitest unit tests for the attached 'user-profile.js' component, mocking its fetch calls and verifying DOM updates.