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

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:

It is better to test the compiled component and not the code used for development. Because the code that needs to work is the final one, the compiled code.

I can install everything at once using:

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

There may be problems depending on the different package versions. I did several tests on different days: on some occasions it was useful to use the npx npm-check-updates command to update everything to the latest version.

After installing everything I make sure that SvelteKit still works:

npm run dev -- --open

Configure Jest and Svelte

I add the configuration files. In this case, I used Koen Van Geert’s post. I create the files:




Finally I add some scripts to package.json:

I try to run

npm run test

and I get as a result:

> memento-sveltekit-jest@0.0.1 test
> jest

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In I:\Repository\Svelte\memento-sveltekit-jest
  17 files checked.
  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches
  testPathIgnorePatterns: \\node_modules\\ - 17 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches

Obviously I haven’t written any tests yet. Finally it’s time to write my first test.

Write a simple test

I start with something trivial: I just need to understand if Jest is configured correctly. I simply check for Welcome to SvelteKit text when starting the application.

I will put all the various tests in the src/__tests__ directory. I create the Welcome.test.ts file and start creating a test:

I import the index.svelte file, which is the home of the application. And then the render library from @testing-library/svelte.

I add a blank test:

Now I have to decide how and what to test. I want to test that there is an element on the page that says Welcome to SvelteKit.

If I run the test now I get:

> memento-sveltekit-jest@0.0.1 test
> jest

 PASS  src/__tests__/Welcome.test.ts (13.859 s)
  Test if Jest is working
    √ Welcome (58 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        16.903 s
Ran all test suites.


Test a Svelte component with Jest

Of course this is only the beginning. I begin to complicate things by adding a new component. First I decide what I want to do, what features it should have and then I move on to implement the necessary tests and code.

I want a component consisting of a button and a text box containing a number. Each time I click the button, the number in the text box increases or decreases by random value. If the value is less than 0 the box will turn red, otherwise it will be green. The button should instead be blue.

I know, it’s a weird example but it allows me to create a non-trivial component.

I run the npm run test:watch command and start by creating a new test file, src/__tests__/RandomButton.test.ts:

The test fails. Obviously, because the RandomButton component doesn’t exist yet. I create it.

I add a test:

The next step is to add a box to show a random number. I create the corresponding test and then update the component to be able to pass the test.

Well, now I move on to the style of the number. I add a test (which will fail) and then modify the component to pass the test:

The next condition is to color the box green if the number is positive. I write the necessary test and then modify the code:

So far I have checked the style of the element. In some cases it may also be useful to check for a class. I write the test to check the color of the button:

and then I change the element code:

After completing the CSS part I move on to the events. They are two:

  1. at the click a random number is generated (integer, positive or negative)
  2. the random number is added to the value shown in the text box.

I start by setting up the first test, the one to generate a random number at the click of the button:

I then correct the component in order to pass the test

I pass to the second test:


That’s it, at least for the moment. Obviously this is only a small guide, my knowledge is still limited. But I’m starting to have fun with that.

The code for this project is available on GitHub (el3um4s/memento-sveltekit-jest). It can be downloaded with the command:

npx degit el3um4s/memento-sveltekit-jest

And this is my Patreon: