Component Testing Patterns

Quick Start

import { page } from 'vitest/browser';
import { render } from 'vitest-browser-svelte';

render(Button, { label: 'Click' });
await page.getByRole('button', { name: 'Click' }).click();
await expect.element(page.getByRole('button')).toBeInTheDocument();

Core Principles

• Locators, never containers: page.getByRole() auto-retries
• Semantic queries: getByRole(), getByLabelText() for accessibility
• Await assertions: await expect.element(el).toBeInTheDocument()
• Real browsers: Tests run in Playwright, not jsdom

Common Patterns

• Locators: page.getByRole('button'), .first(), .nth(0), .last()
• Interactions: await input.fill('text'), await button.click()
• Runes: Use .test.svelte.ts files, flushSync(), untrack()
• Files: *.svelte.test.ts (browser), *.ssr.test.ts (SSR), *.test.ts (server)

References

• setup-configuration.md - Complete Vitest browser setup
• testing-patterns.md - Comprehensive testing patterns
• locator-strategies.md - Semantic locator guide
• troubleshooting.md - Common issues and fixes

<!-- PROGRESSIVE DISCLOSURE GUIDELINES: - Keep this file ~50 lines total (max ~150 lines) - Use 1-2 code blocks only (recommend 1) - Keep description <200 chars for Level 1 efficiency - Move detailed docs to references/ for Level 3 loading - This is Level 2 - quick reference ONLY, not a manual -->