@testing-library/svelte

What is @testing-library/svelte?

@testing-library/svelte is a library for testing Svelte components. It provides utilities to render Svelte components, query elements, and simulate user interactions, making it easier to write tests that resemble how users interact with your application.

What are @testing-library/svelte's main functionalities?

Rendering Components

This feature allows you to render Svelte components in a test environment. The `render` function returns utility functions to query the rendered component.

const { render } = require('@testing-library/svelte');
const MyComponent = require('./MyComponent.svelte');

const { getByText } = render(MyComponent);
expect(getByText('Hello World')).toBeInTheDocument();

Querying Elements

This feature provides various query functions like `getByText` and `getByRole` to find elements in the rendered component.

const { render } = require('@testing-library/svelte');
const MyComponent = require('./MyComponent.svelte');

const { getByText, getByRole } = render(MyComponent);
expect(getByText('Submit')).toBeInTheDocument();
expect(getByRole('button')).toBeInTheDocument();

Simulating User Interactions

This feature allows you to simulate user interactions like clicks, typing, etc., using the `fireEvent` utility.

const { render, fireEvent } = require('@testing-library/svelte');
const MyComponent = require('./MyComponent.svelte');

const { getByText } = render(MyComponent);
const button = getByText('Click me');
await fireEvent.click(button);
expect(getByText('Clicked')).toBeInTheDocument();

Other packages similar to @testing-library/svelte

svelte-testing-library

svelte-testing-library is another library for testing Svelte components. It is similar to @testing-library/svelte but may have different APIs and utilities. It focuses on providing a simple and intuitive API for testing Svelte components.

jest

Jest is a popular testing framework that can be used to test Svelte components when combined with other libraries like @testing-library/svelte. It provides a comprehensive testing solution with features like mocking, snapshot testing, and more.

cypress

Cypress is an end-to-end testing framework that can be used to test Svelte applications. It provides a powerful and easy-to-use API for writing tests that simulate real user interactions in a browser environment.

README

Svelte Testing Library

Simple and complete Svelte testing utilities that encourage good testing practices.

Read The Docs | Edit the docs

---

Table of Contents

• The Problem
• This Solution
• Installation
• Setup
• Docs
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
  • ❓ Questions
• Contributors

The Problem

You want to write maintainable tests for your Svelte components.

This Solution

@testing-library/svelte is a lightweight library for testing Svelte components. It provides functions on top of svelte and @testing-library/dom so you can mount Svelte components and query their rendered output in the DOM. Its primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev @testing-library/svelte

This library supports svelte versions 3, 4, and 5.

You may also be interested in installing @testing-library/jest-dom so you can use the custom jest matchers.

Setup

We recommend using @testing-library/svelte with Vitest as your test runner. To get started, add the svelteTesting plugin to your Vite or Vitest config.

  // vite.config.js
  import { svelte } from '@sveltejs/vite-plugin-svelte'
+ import { svelteTesting } from '@testing-library/svelte/vite'

  export default defineConfig({
    plugins: [
      svelte(),
+     svelteTesting(),
    ]
  });

See the setup docs for more detailed setup instructions, including for other test runners like Jest.

Docs

See the docs over at the Testing Library website.

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

❓ Questions

For questions related to using the library, please visit a support community instead of filing an issue on GitHub.

• Discord
• Stack Overflow

Contributors

Thanks goes to these people (emoji key):

Ben Monro 💻 ⚠️ 🤔 📖	Emil Tholin 💻 ⚠️ 🤔	Eduardo Rabelo ⚠️ 💻 📖 💡	Tim Deschryver 📖	Emanuele 💻 ⚠️ 📖	pngwn 💻 ⚠️	Sebastian Silbermann 💻
Rahim Alwer 💻 📖 ⚠️ 👀	Bob 🐛 💻	Ron Merkin 💻	Ben McCann ⚠️	John Bowser 💻 ⚠️	Yoann 💻	Yanick Champoux 💻
Michael Cousins 💻

This project follows the all-contributors specification. Contributions of any kind welcome!