Svelte Testing

Quick Start

// Client-side component test (.svelte.test.ts) import { render } from 'vitest-browser-svelte'; import { expect } from 'vitest'; import Button from './button.svelte';

test('button click increments counter', async () => { const { page } = render(Button); const button = page.getByRole('button', { name: /click me/i });

await button.click();
await expect.element(button).toHaveTextContent('Clicked: 1');

});

Core Principles

• Always use locators: page.getBy*() methods, never containers

• Multiple elements: Use .first() , .nth() , .last() to avoid strict mode violations

• Use untrack(): When accessing $derived values in tests

• Real API objects: Test with FormData/Request, minimal mocking

Reference Files

• core-principles | foundation-first | client-examples

• server-ssr-examples | critical-patterns

• client-server-alignment | troubleshooting

Notes

• Never click SvelteKit form submit buttons - Always use await expect.element()

• Test files: .svelte.test.ts (client), .ssr.test.ts (SSR), server.test.ts (API)