// Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state.
| name | component-testing-patterns |
| description | Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state. |
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();
page.getByRole() auto-retriesgetByRole(), getByLabelText() for
accessibilityawait expect.element(el).toBeInTheDocument()page.getByRole('button'), .first(), .nth(0),
.last()await input.fill('text'), await button.click().test.svelte.ts files, flushSync(), untrack()*.svelte.test.ts (browser), *.ssr.test.ts (SSR),
*.test.ts (server)Database migration patterns for SQLite. Use when creating migrations, modifying schema, or running database changes.
Remote functions reactive UI patterns. Use for smooth in-place updates, preventing page jumps, and managing loading states with .current property.
SvelteKit patterns for devhub-crm. Use for remote functions (query, form, command), routing, and server-side logic.
Better-auth integration for authentication. Use when implementing login, registration, protected routes, or email verification.
SQLite operations using better-sqlite3 with prepared statements. Use when implementing CRUD operations, timestamps, and user-scoped queries with row-level security.
Svelte 5 error handling. Use for error boundaries, async await expressions, loading states, and form errors.