testing

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Vitest setup for Svelte with browser entry points

To use Vitest with Svelte, install it with `npm install -D vitest`. In vite.config.js, import from 'vitest/config' and use defineConfig. Configure the resolve option to use browser entry points when VITEST environment variable is set by adding a conditions array with 'browser' when running tests in Node.

Unit testing Svelte functions with $state runes

Functions using $state can be tested directly with Vitest. Import flushSync from 'svelte' to handle async state updates. The test file should have a .svelte.test.js or .svelte.ts extension so Vitest processes it with rune support.

$effect.root for testing effects in isolation

When testing code that uses $effect, wrap the test code inside $effect.root(() => { ... }) and call the returned cleanup function at the end. Use flushSync() after state changes to execute pending effects synchronously before writing expectations.

Component testing with mount and unmount

Svelte provides mount and unmount APIs for component testing. Import mount from 'svelte' and call it with the component, a target (document.body when using jsdom), and props. Call unmount to clean up the component from the DOM after testing.

jsdom setup for component testing

To test components that interact with the DOM, install jsdom with `npm install -D jsdom`. In vite.config.js, set the test environment to 'jsdom' in the test configuration, or add `// @vitest-environment jsdom` comment at the top of individual test files.

Component testing with @testing-library/svelte

For higher-level component testing, use @testing-library/svelte which provides render, screen, and other utilities. This approach is more resilient to component structure changes than direct mount/unmount testing.

Testing components with two-way bindings and context

When testing components that use two-way bindings, context, or snippet props, create a wrapper component for the test and interact with that wrapper rather than testing the component directly.

Storybook for component development and testing

Storybook can be used to develop and test components. Use `npx sv add storybook` to install it via Svelte's CLI with testing features included. Storybook runs with Vitest's browser mode for realistic testing.

Storybook play function for interaction testing

In Storybook stories, use the play function to simulate user interactions. The play function receives args, canvas, and userEvent, and can make assertions using Testing Library and Vitest APIs.

Playwright setup for E2E testing

Use Svelte CLI with `npx sv add playwright` or `npm init playwright` to set up Playwright. If not using Vite, configure playwright.config.js with a webServer object that specifies the command to start the app and the port it runs on.

E2E tests are framework-agnostic

End-to-end tests with Playwright do not interact with Svelte-specific features. They interact with the DOM directly and are written the same way regardless of whether the application uses Svelte or another framework.

Testing types for Svelte applications

A Svelte application typically has three different types of tests. Unit Tests focus on testing business logic in isolation, validating individual functions and edge cases. Component Tests validate that a Svelte component mounts and interacts as expected throughout its lifecycle, requiring a tool that provides a Document Object Model (DOM). End-to-End Tests ensure users can interact with the application as a whole in a manner close to production by testing a deployed version.

Give your agent this brain