How to test SvelteKit app with Jest

One of my weaknesses is the lack of discipline when it comes to testing. So I started looking around and figuring out how to do it. There are many frameworks, and frankly I am too ignorant on the subject to decide which one to use. As a result I went absolutely random and decided to use Jest. I decided to use Jest with SvelteKit. These are my notes.

Create a new project

Unlike the last posts, today I start with a completely new project. I don’t want to deal with old code while learning something new. I create a new SvelteKit based project using the command:

npm init svelte@next

I use these settings:

Which Svelte app template? » Skeleton project
Use TypeScript? » Yes
Add ESLint for code linting? » Yes
Add Prettier for code formatting? » Yes

Then I install the dependencies:

npm install

I check that everything is successful by launching:

npm run dev -- --open

Good. So far the easy part. Now the fun begins.

Install Jest

As always, I searched the internet. There are many interesting posts

• Testing and Debugging Svelte
• Setting up Jest with SvelteKit
• Testing Svelte components with Jest
• How to test Svelte components
• Implementing Test Driven Development in Svelte
• Writing unit tests for Svelte — Series Articles
• Test Your Svelte Components with uvu and testing-library
• Svelte with TypeScript and Jest (Starter Project)

I have used many of the tips in these guides to understand how to make my project work.

As recommended in a simple and effective way by Dave Ceddia I need some packages:

• jest to run the tests
• @types/jest to get TS to stop complaining about Jest’s globals like expect
• ts-jest to let you write your tests in TypeScript
• @testing-library/jest-dom for handy DOM matcher functions like toBeInTheDocument