vitest-browser-svelte

Render Svelte components in Vitest Browser Mode. This library follows testing-library principles and exposes only locators and utilities that encourage you to write tests that closely resemble how your Svelte components are used.

Requires vitest and @vitest/browser 2.1.0 or higher.

1import { render } from 'vitest-browser-svelte'
2import { expect, test } from 'vitest'
3import Component from './Component.svelte'
4
5test('counter button increments the count', async () => {
6  const screen = render(Component, {
7    initialCount: 1,
8  })
9
10  await screen.getByRole('button', { name: 'Increment' }).click()
11
12  await expect.element(screen.getByText('Count is 2')).toBeVisible()
13})

[!NOTE] This library doesn't expose or use act. Instead, you should use Vitest's locators and expect.element API that have retry-ability mechanism baked in.

vitest-browser-svelte also automatically injects render and cleanup methods on the page. Example:

1// vitest.config.ts
2import { defineConfig } from 'vitest/config'
3
4export default defineConfig({
5  test: {
6    // if the types are not picked up, add `vitest-browser-svelte` to
7    // "compilerOptions.types" in your tsconfig or
8    // import `vitest-browser-svelte` manually so TypeScript can pick it up
9    setupFiles: ['vitest-browser-svelte'],
10    browser: {
11      name: 'chromium',
12      enabled: true,
13    },
14  },
15})

1import { page } from '@vitest/browser/context'
2import Component from './Component.svelte'
3
4test('counter button increments the count', async () => {
5  const screen = page.render(Component, {
6    initialCount: 1,
7  })
8
9  screen.cleanup()
10})

Unlike @testing-library/svelte, vitest-browser-svelte cleans up the component before the test starts instead of after, so you can see the rendered result in your UI. To avoid auto-cleanup, import the render function from vitest-browser-svelte/pure.

Special thanks

• Forked from @testing-library/svelte