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
