Test Svelte components with Jest.

TODO: collapasable, copyable, download, etc

Can you unit test Svelete components?Yes, you can unit test Svelte components. Unit testing Svelte components involves testing the components in isolation from the rest of the application. This means verifying that the components render correctly with given props, respond to user inputs, and handle internal state changes as expected. To facilitate unit testing of Svelte components, you can use testing libraries and tools designed for JavaScript and Svelte applications. The most common approach involves the following tools and setup:

1. Jest

Jest is a popular testing framework that works well with Svelte for running tests and providing utilities to simulate browser environments, mock functions, and verify outcomes.

2. Testing Library

The Testing Library, specifically @testing-library/svelte, offers utilities to interact with Svelte components in a way that simulates how users would. It helps in querying the DOM in a readable and maintainable way.

Setup and Example

Here's a basic guide to get started with unit testing Svelte components:

Step 1: Install Dependencies

First, you'll need to install Jest and the Svelte Testing Library:

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

You might also need to install babel-jest and configure Babel to transpile Svelte components for Jest.

Step 2: Configure Jest

Create a jest.config.js file in your project root to configure Jest for Svelte:

module.exports = {
  transform: {
    '^.+\\.svelte$': 'svelte-jester',
    '^.+\\.js$': 'babel-jest',
  },
  moduleFileExtensions: ['js', 'svelte'],
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

Step 3: Write a Test

Create a test file for your Svelte component. For example, if you have a Button.svelte component, create a Button.test.js file:

import { render, fireEvent } from '@testing-library/svelte';
import Button from './Button.svelte';

test('button renders with correct text', () => {
  const { getByText } = render(Button, { props: { text: 'Click me' } });
  expect(getByText('Click me')).toBeInTheDocument();
});

test('button click updates text', async () => {
  const { getByText, component } = render(Button, { props: { text: 'Click me' } });
  const button = getByText('Click me');
  await fireEvent.click(button);
  expect(button.textContent).toBe('Clicked');
});

Step 4: Run the Test

Execute your tests using Jest:

npx jest

This setup provides a basic environment for unit testing Svelte components. Depending on your project's complexity, you might need additional configuration, especially for handling styles, assets, or more complex interactions.

Test Svelte components with Jest. created at Tue Jan 20 1970 18:18:17 GMT+0000 (Coordinated Universal Time)