Unit testing in Svelte

We are going to set up unit testing in Svelte using Testing Library and Jest.

The working version of the project is available here. You can use it as a starter template for your project.

1 – Let’s start with the standard svelte template to create a new project.

npx degit sveltejs/template my-svelte-project

You need to have Nodejs, npm, and npx installed to run the above command.

2 – Execute the following to build and run the starter project.

cd my-svelte-project
npm install
npm run dev

We are now going to add unit testing to the project.

3 – Install Jest. It is the JavaScript testing framework.

npm install --save-dev jest 

4 – Add the following to your package.json

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

5 – Install svelte-jester. It is used to compile svelte components in Jest.

npm install --save-dev svelte-jester

6 – Add the following Jest configuration to your package.json

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

7 – As we are going to use ES6 modules in our project we 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)

7.1 – Install Babel

npm install --save-dev @babel/core

7.2 – Install babel-jest

npm install --save-dev babel-jest

7.3 – Install @babel/preset-env

pnpm install --save-dev @babel/preset-env

7.4 – Add a basic .babelrc configuration

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

7.5 – Update the Jest transform configuration

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

8 – Install Testing Library for Svelte. It is a family of packages that work on top of Jest to ease the writing of UI tests.

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

9 – Next, we are going to install jest-dom package from Testing Library to add handy assertions to Jest.

9.1 – Install jest-dom

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

9.2 – Add the following to your Jest configuration in package.json

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

10 – Jest uses jsdom to conduct UI tests in Nodejs. The tests run in Nodejs, but JSDOM provides an environment as if the tests are running in a browser.

jsdom is a pure JavaScript implementation of the DOM and browser APIs that runs in node.

Run the following the run the tests in jsdom environment instead of the default Nodejs environment.

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

We will have to use the following comment at the top of each test file.

/**
 * @jest-environment jsdom
 */

11 – Create __tests__ folder under src, and write the first test.

/**
 * @jest-environment jsdom
 */

import '@testing-library/jest-dom'
import {render, fireEvent} from '@testing-library/svelte'
import App from '../App'

test('shows proper heading when rendered', () => {
  const {getByText} = render(App, {name: 'World'})

  expect(getByText('Hello World!')).toBeInTheDocument()
})

12 – Finally run the tests.

npm run test

Links

• https://testing-library.com/docs/svelte-testing-library/intro