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