component-testing-patterns

What problem does it solve?

This Skill provides a comprehensive guide to testing Svelte 5 components using Vitest's browser mode, ensuring your UI components work correctly across real browsers. It addresses the limitations of jsdom by running tests in Playwright, offering reliable, accessible, and robust testing patterns for modern Svelte applications, including reactive state and snippets.

Core Features & Use Cases

• Real Browser Testing: Executes tests in actual Chromium browsers (via Playwright), eliminating jsdom inconsistencies and providing higher confidence in UI behavior.
• Semantic Locators: Encourages the use of accessibility-first locators (getByRole, getByLabelText) for robust and user-centric tests.
• Svelte 5 Runes Support: Provides patterns for testing reactive state ($state, $derived) and Svelte 5 snippets, ensuring full compatibility with the latest Svelte features.
• Built-in Reliability: Leverages Vitest's auto-retry logic for locators, reducing flaky tests and simplifying asynchronous assertions.
• Use Case: Develop a complex interactive form component. This Skill guides you through writing tests that simulate user interactions (typing, clicking), verify validation messages, and ensure accessibility, all within a real browser environment, guaranteeing a high-quality user experience.

Quick Start

Install vitest, @vitest/browser-playwright, vitest-browser-svelte, and playwright. Configure vite.config.ts with a multi-project setup for client, SSR, and server tests. Use page.getByRole() or page.getByLabelText() to locate elements. Perform interactions with await element.click() or await input.fill('text'). Assert element states with await expect.element(element).toBeInTheDocument().