Simple and complete Svelte testing utilities that encourage good testing practices.
@testing-library/svelte is a testing utility library built on top of @testing-library/dom that enables developers to test Svelte components by rendering them into a DOM environment and querying the output as users would interact with it. Rather than testing component internals or instance methods, it encourages testing the rendered DOM using accessibility-focused queries like getByRole() and getByLabelText(), which leads to more maintainable tests that resist implementation changes.
The library was created to bring the Testing Library philosophy to the Svelte ecosystem—the principle that tests should resemble how software is actually used. With over 360,000 weekly downloads, it has become the de facto standard for component testing in Svelte applications. It works seamlessly with modern test runners like Vitest and Jest, providing a consistent API familiar to developers who have used Testing Library in React, Vue, or Angular projects.
@testing-library/svelte supports Svelte 3, 4, and 5, adapting to the framework's evolution while maintaining a stable API. The library provides a render() function to mount components with props, the screen object for DOM queries, and integrates with @testing-library/user-event for realistic user interactions. It runs tests in jsdom by default, making it fast and suitable for CI/CD pipelines without requiring browser automation.
Typical users include frontend developers building Svelte applications who need to write unit and integration tests for their components, teams maintaining component libraries that require comprehensive test coverage, and developers migrating from other frameworks who want a familiar testing approach that emphasizes accessibility and user behavior over implementation details.
import { render, screen } from '@testing-library/svelte';
import { userEvent } from '@testing-library/user-event';
import { expect, test } from 'vitest';
import Counter from './Counter.svelte';
// Counter.svelte: <script>let count = $state(0);</script>
// <button on:click={() => count++}>Count: {count}</button>
test('increments counter when button is clicked', async () => {
const user = userEvent.setup();
render(Counter);
const button = screen.getByRole('button', { name: /count:/i });
expect(button).toHaveTextContent('Count: 0');
await user.click(button);
expect(button).toHaveTextContent('Count: 1');
await user.click(button);
expect(button).toHaveTextContent('Count: 2');
});
test('displays custom initial count from props', () => {
render(Counter, { props: { initialCount: 10 } });
const button = screen.getByRole('button');
expect(button).toHaveTextContent('Count: 10');
});Component interaction testing: Verify that clicking a button toggles visibility, updates state, or triggers form submissions. Use userEvent.click() to simulate realistic user interactions and assert on the resulting DOM changes, ensuring your component responds correctly to user actions.
Form validation workflows: Test complex forms by filling inputs using userEvent.type(), submitting forms, and asserting on validation messages or success states. Query form elements by their accessible labels using getByLabelText() to ensure your forms are both functional and accessible.
Conditional rendering logic: Render components with different prop combinations and verify that the correct UI elements appear or disappear. For example, test that an error message only displays when an error prop is present, or that premium features only render for authenticated users.
Accessibility compliance: Use role-based queries like getByRole('button') or getByRole('navigation') to ensure your components render semantically correct HTML. If your queries fail, it's a signal that your component may have accessibility issues that would affect real users with assistive technologies.
Component library documentation: Write tests that serve as living documentation for component APIs. Each test demonstrates how to use a component with different prop combinations, making it easier for other developers to understand expected behavior and integration patterns.
Cypress is a next generation front end testing tool built for the modern web
A high-level API to automate web browsers
Simple and complete React DOM testing utilities that encourage good testing practices.
Next generation testing framework powered by Vite
npm install @testing-library/sveltepnpm add @testing-library/sveltebun add @testing-library/svelte