In this post on SvelteKit uvu testing, we focus on unit testing with uvu — a fast and flexible test runner by Luke Edwards. It performs a similar function to Jest but is more lightweight so will typically run faster. It is handy for running unit tests and works with Svelte as well as SvelteKit. Unit tests look at isolating a single component and checking that it generates the expected behaviour given controlled inputs. You can run unit tests with uvu on Svelte components as well as utility functions. We shall see both. Our focus will be on unit tests here and we use Testing Library to help. We will work in TypeScript, but don’t let that put you off if you are new to TypeScript, you will need to understand very little TypeScript to follow along.
Vistest is another new test runner, which can be used in a similar way to uvu. I have seen a set of tests which suggest uvu runs faster than Vitest . Both tools are under development so if speed is critical for your project it is worth running benchmarks using latest versions on your own code base.
Integration and end-to-end testing are other types of tests. Integration testing is a little less granular (than unit testing), combining multiple components or functions (in a way used in production) and checking they behave as expected. End-to-end testing focuses on a final result working as an end-user would interact with them. SvelteKit comes with some Playwright support and that is probably a better tool for end-to-end testing. That is because Playwright is able to simulate how your app behaves in different browsers.
We will add a couple of unit tests to a rather basic Svelte app. It is the same one we looked at when we explored local constants in Svelte with the @const tag. The app displays not a lot more than a basic colour palette. In brief, it displays the colour name in dark text for lighter colours and vice verse. The objective here is to maximise contrast between the palette, or background colour and the text label. This is something we will test works with uvu. It also has a few utility functions, we will test one of those. You can follow along with that app, but can just as easily create a feature branch on one of your existing SvelteKit apps and add the config we run from there. Of course you will want to design your own unit tests. Either way, let’s crack on.
Let’s start by installing all the packages we will use:
You might be familiar with Kent C Dodds’ Testing Library , especially if you come from a React background. I included it here so you can see there is a Svelte version and that it is not too different to the React version. Although we include it in the examples, it is optional so feel free to drop it if your own project does not need it.
We’ll now run through the config files then finally set up a handful of tests. Next stop:
You might have noticed we added the
module-alias package. This will
be handy here so that our tests and the files we are testing can use alias references (like
$lib). For it to work, we need to add a touch more configuration to
22 below). I have
$tests as an additional alias; remember also to add other aliases
you have defined in your project:
We also have a new script for running unit tests at line
uvu we have the test folder, I have changed this
tests/lib since, depending
on your project setup, you might have a dummy Playwright test in the
tests folder. If you already have more extensive Playwright testing (or plan to add some), you might want
to move the uvu unit tests to their own folder within
you do this, also, change this directory in the script.
We will set up the
tests/lib folder to mirror the
src/lib folder. So for example, the test for
src/lib/components/Palette.svelte will be in
Let's move on the the uvu config.
We’re using the Svelte example from the uvu repo as a guide here. In addition to that, we
also have some config based on the basf/svelte-spectre project . If your project does not already have a
tests folder create one
now in the project root. Next, create a
setup directory with tests
and add these four files:
If you need
.env environment variable support for your project, install
dotenv package. Then uncomment line
register.ts and replace line
18 with line
That’s all the config we need. Let’s add a first test. This will test a utility function. The idea of the function is to help choose a text colour (either white or black) which has most contrast to the input background colour.
Most important here is not to forget to include
test.run() at the end…
I’ve done that a few times 😅. Notice how we are able to use aliases in lines
3. You can see the full range of assert methods available in the uvu docs .
Let’s do a Svelte component test, making use of snapshots and Testing Library. Luke Edwards, who created uvu reflects his philosophy on snapshots in the project . This explains why snapshots in uvu work a little differently to what you might be familiar with in Jest.
Note in lines
31 how we import
the component and its props. In lines
27 we see how you can create a snapshot. Meanwhile in lines
33 we see how to use Testing Library with uvu.
To check the tests out, run:
from the Terminal.
In this post we looked at:
- what uvu is and how to configure it to work with SvelteKit for testing components as well as utility functions,
- how to use Testing Library with uvu and Svelte,
- how snapshots work in uvu.
I do hope there is at least one thing in this article which you can use in your work or a side project. Also let me know if you feel more explanation of the config is needed.
You can see an example project with all of this setup and config on the Rodney Lab Git Hub repo . You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.
- Three common types of testing used in web development and also more generally in software engineering are Unit Tests, Integrations Tests and End-to-End Tests. End-to-End tests tend to focus on a finished product as it is presented to the final user. A typical test might be checking the user is taken to the right page when he, she or they open the menu and click the about link. Unit tests look at small individual parts of an app. This could be as granular as checking a breadcrumb link has the correct aria-label for its state. Integration testing fits between the two scales, ensuring groups of components function together as expected.
- uvu works with SvelteKit with or without TypeScript. We have seen an example setup using TypeScript. uvu is performant, lightweight and supports native ES Modules so is a great match for SvelteKit unit testing. It also pairs with Testing Library, letting you test Svelte components as well as your utility functions.
- uvu supports snapshot testing though it works a little differently to how it works with Jest. uvu snapshot testing was deliberately set up this way. With Jest, for example, when the stored snapshot differs from the test result, the developer can hit a key automatically to update the stored snapshot to match the current test result. It is all too easy to accept the result without checking what the actual difference is. As such this potentially becomes an easy way to introduce regressions. To help mitigate that risk, with uvu you have to update snapshots manually. You can add a snapshot to an uvu test using assert.snapshot.
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.