Setting up Jest with SvelteKit

How to set up Jest and Testing-Library in a SvelteKit project

SvelteKit + Jest + Testing-Library

In this guide, we will be setting up Jest with Testing-Library in a SvelteKit project.
I will be using typescript but you can just as easily use this with javascript.
We will start by installing all of the dependencies, then move on to configuring everything, and then we will go over a simple example in the final section.

You can find an example repo here: https://github.com/koenvg/sveltekit-jest-example

1. Installation

npm i jest ts-jest svelte-jester @types/jest @testing-library/svelte --dev

Jest, ts-jest and svelte-jester are needed for the basic jest set-up. You can skip installing @testing-library/svelte if you want to use a different testing library or none at all.

2. Configuration

2.1 Configure Jest
Create a jest.config.cjs file in the root of your project.

2.2 Add svelte testing configuration
SvelteKit recently switched to ESM modules for their config and svelte-jester does not support this yet so you need to add a separate config that still uses CommonJS.
Create jest.config.test.cjs in the root of your repository

2.3 Optionally configure jest-dom
2.3.1 Install dependency

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

2.3.2 Create jest-setup.ts in the root of your project

2.3.3 Update the jest config

2.2.4 Add/Update the following line in your tsconfig.json

"include": ["./jest-setup.ts"]

The file will then look something like this

3. Example test

This is a very simple test case. You can check out the official website for more information.