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 - svelte-jester to compile Svelte components for Jest, so that Jest can use them
- @testing-library/svelte for some useful functions to test your Svelte components with
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:
svelte.config.test.cjs
jest-setup.ts
jest.config.cjs
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.
Fine.
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:
- at the click a random number is generated (integer, positive or negative)
- 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:
Conclusions
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: patreon.com/el3um4s
