Skip to main content

Setup

We recommend using Vitest but you're free to use the library with any testing framework and runner you're comfortable with.

Vitest​

  1. Install Vitest and jsdom

We're using jsdom here as the test environment, but you can use any other options e.g happy-dom.

npm install --save-dev vitest jsdom

Optionally install @vitest/ui, which opens a UI within a browser window to follow the progress and interact with your tests.

npm install --save-dev @vitest/ui

  1. Add the test scipts to your package.json to run the tests with Vitest

    {
      "scripts": {
        "test": "vitest run",
        "test:ui": "vitest --ui",
        "test:watch": "vitest"
      }
    }

  2. To compile the Svelte components before using them in Vitest, you need to install @sveltejs/vite-plugin-svelte and Vite

    npm install --save-dev @sveltejs/vite-plugin-svelte vite

  3. Add a vitest.config.ts configuration file to the root of your project. Add globals: true so cleanup() runs after each test.

    import {defineConfig} from 'vitest/config'
    import {svelte} from '@sveltejs/vite-plugin-svelte'

    export default defineConfig({
      plugins: [svelte({hot: !process.env.VITEST})],
      test: {
        globals: true,
        environment: 'jsdom',
      },
    })

  4. Optionally install vitest-dom to add handy assertions to Vitest

    4.1 Install vitest-dom

    npm install --save-dev vitest-dom

    4.2 import vitest-dom at within the vitest setup file (usually vitest-setup.(js|ts))

    import * as matchers from 'vitest-dom/matchers'
    import {expect} from 'vitest'
    expect.extend(matchers)

    // or:
    import 'vitest-dom/extend-expect'

  5. Create your component and a test file (checkout the rest of the docs to see how) and run the following command to run the tests.

    npm test

Jest​

  1. Install Jest & jest-environment-jsdom

    npm install --save-dev jest jest-environment-jsdom

  2. Add the following to your package.json

    {
      "scripts": {
        "test": "jest src",
        "test:watch": "jest src --watch"
      }
    }

  3. You'll need to compile the Svelte components before using them in Jest, so we need to install svelte-jester

    npm install --save-dev svelte-jester

  4. Add the following Jest configuration to your package.json

    {
      "jest": {
        "transform": {
          "^.+\\.svelte$": "svelte-jester"
        },
        "moduleFileExtensions": ["js", "svelte"],
        "testEnvironment": "jsdom"
      }
    }

  5. If you are using ES6 modules in your project you have to add Jest's babel transform setting (it is set by default, but since we are overriding the transform config, we have to add it explicitly)

    5.1 Install babel-jest

    npm install --save-dev babel-jest

    5.2. Add a basic .babelrc configuration

    {
      "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
    }

    5.3. Update the Jest transform configuration

    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.svelte$": "svelte-jester"
    },

  6. This is optional but it is recommended, you can install jest-dom to add handy assertions to Jest

    6.1 Install jest-dom

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

    6.2 Add the following to your Jest configuration in package.json

    {
      "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
    }

  7. Create your component + test file (checkout the rest of the docs to see how) and run it

    npm test

TypeScript​

To use TypeScript with Jest, you'll need to install and configure svelte-preprocess and ts-jest. For full instructions, see the svelte-jester docs.

Preprocessors​

If you'd like to also include any Svelte preprocessors then simply follow the instructions over at svelte-jester.