Edit

Svelte Testing Library

svelte-testing-library simplifies the use of dom-testing with Svelte components & applications.

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

• svelte-testing-library on GitHub

Usage

You will first need to install and configure jest-transform-svelte in order to use svelte in jest.

You must add cleanup to your test fixture's beforeEach hook:

import { render, cleanup } from '@testing-library/svelte'

beforeEach(cleanup) //this is required.

Examples

App.svelte

<script>
  export let name
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

App.spec.js

import App from '../src/App.svelte'
import { render, cleanup } from '@testing-library/svelte'
beforeEach(cleanup)
describe('App', () => {
  test('should render greeting', () => {
    const { getByText } = render(App, { props: { name: 'world' } })

    expect(getByText('Hello world!'))
  })

  test('should change button text after click', async () => {
    const { getByText } = render(App, { props: { name: 'world' } })

    fireEvent.click(getByText('Button Text'))

    const button = await waitForElement(() => getByText('Button Clicked'))

    expect(button).toBeInTheDocument()
  })
})

Containers

Useful for snapshot tests. You can use query the container if you need more granular tests.

App.svelte

<script>
  export let name
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

App.spec.js

import App from '../src/App.svelte'
import { render, cleanup } from '@testing-library/svelte'
beforeEach(cleanup)
describe('App', () => {
  test('should render greeting', () => {
    const { container } = render(App, { props: { name: 'world' } })

    expect(container.querySelector('h1').innerHTML).toBe('Hello world!')
    expect(container.firstChild).toMatchSnapshot()
  })

})

Cleanup

You can ensure cleanup is called after each test and import additional assertions by adding it to the setup configuration in Jest.

In Jest 24 and up, add the setupFilesAfterEnv option to your Jest config:

// jest.config.js
module.exports = {
  setupFilesAfterEnv: [
    'svelte-testing-library/cleanup-after-each',
    // ... other setup files ...
  ],
  // ... other options ...
}