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