testing-svelte

Svelte Testing

Quick Start

// browser component test
import { render } from "vitest-browser-svelte";
import { expect, test } from "vitest";
import { page } from "vitest/browser";
// button.svelte: <button onclick={() => count++}>Clicked: {count}</button>
import Button from "./button.svelte";

test("button click increments counter", async () => {
  await render(Button);
  const button = page.getByRole("button");
  // or from the result: const screen = await render(Button); screen.getByRole(...)

  await button.click();
  await expect.element(button).toHaveTextContent("Clicked: 1"); // exact full text
});

Interaction Tests Are Mandatory

Every test for an interactive component (inputs, autocompletes, buttons, forms) MUST interact with it and assert the result: a render-only test proves only that the component mounts.

1. Interact: click, type, select, submit
2. Assert the outcome: the selected value text, the callback data content, the DOM state change
3. Never silently skip: assert the precondition instead of guarding it with an if (items.length > 0) that skips the interaction when it fails
4. Verify callback data: capture what a callback received and assert it; a fixture component that renders the payload into an output element works (give it an accessible name, or comment why a test id is used). "The callback was called" misses an onChange that passes objects instead of strings

Core Principles

• Prefer locators: page.getBy*() methods first. A raw querySelector or data-testid needs a one-line comment saying why no accessible locator works (svelte-5:vitest query rule)
• Multiple elements: use .first(), .nth(), .last() to avoid strict mode violations
• Real API objects: test with FormData and Request, with minimal mocking
• Mock at the right seam: vi.mock for module boundaries, msw for the network boundary. msw is this rule applied to HTTP: keep the real component and the real fetch, swap only what crosses the wire (svelte-5:msw)
• vi.mock / vi.hoisted / vi.unmock at the top level only: inside describe, test, or a function they throw in Vitest 5 (was defined outside of the module's top level scope). vi.doMock may go anywhere. Factories, SvelteKit $app/* stubs, component swaps: svelte-5:vitest mocking reference