// Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state.
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.
| 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)