Testing

SvelteKit projects are usually tested with two tools. Vitest, which shares your Vite configuration, covers functions and components, while Playwright checks that the whole app works in a real browser.

Adding the test tools

The sv add-ons set up both tools in one go.

npx sv add vitest playwright

npm run test:unit   # Vitest
npm run test:e2e    # Playwright

The vitest add-on installs the packages, adds package.json scripts and writes a Vite test configuration that runs server and client code separately. What it generates can change between sv releases, so open vite.config.ts and package.json afterwards to see what you got. The examples below follow the setup described in the official Svelte docs: jsdom with Testing Library.

Unit testing plain functions

Pure functions in src/lib can be imported and tested directly. Test files usually sit next to the code they test, named *.test.ts or *.spec.ts.

// src/lib/price.ts
export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`;
}

// src/lib/price.test.ts
import { describe, expect, it } from 'vitest';
import { formatPrice } from './price.js';

describe('formatPrice', () => {
  it('formats cents as dollars', () => {
    expect(formatPrice(1250)).toBe('$12.50');
  });
});

Testing code that uses runes

Runes such as $state are only compiled inside .svelte and .svelte.ts files. To test logic that uses them, name the test file *.svelte.test.ts.

// src/lib/counter.svelte.ts
export function createCounter() {
  let count = $state(0);
  const double = $derived(count * 2);
  return {
    get count() { return count; },
    get double() { return double; },
    increment() { count += 1; }
  };
}

// src/lib/counter.svelte.test.ts
import { expect, test } from 'vitest';
import { createCounter } from './counter.svelte.js';

test('double follows count', () => {
  const counter = createCounter();
  expect(counter.double).toBe(0);

  counter.increment();
  expect(counter.count).toBe(1);
  expect(counter.double).toBe(2);
});

When the code under test uses $effect, wrap the test body in $effect.root, and call flushSync() from svelte to run pending effects synchronously.

Component tests

Render components in a jsdom environment with Testing Library, and query elements the way users see them: by role and by text.

npm install -D jsdom @testing-library/svelte @testing-library/user-event @testing-library/jest-dom