testing-svelte

Svelte Testing

Quick Start

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

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

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

Interaction Tests Are Mandatory

Every test for an interactive component MUST include meaningful interaction. A render-only test proves the component mounts, it does NOT prove it works.

For components with inputs, autocompletes, buttons, or forms:

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: no if (items.length > 0) guards that skip the interaction when the precondition fails. ASSERT the precondition instead.
4. Verify callback data: use fixture components with data-testid output divs to capture and assert what callbacks received. Checking "callback was called" is not enough; check WHAT it was called with.

Example failure: tests that "verified" autocomplete interaction by checking "a selection exists" without checking which value; this missed a bug where onChange returned objects instead of strings.

Core Principles

• Always use locators: page.getBy*() methods, never containers
• Multiple elements: Use .first(), .nth(), .last() to avoid strict mode violations
• Real API objects: Test with FormData/Request, 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)