Our story.

Setup Jest unit testing with Svelte


Dela på facebook
Dela på linkedin
Dela på twitter
Dela på email

Yesterday I discovered that it’s actually possible to do unit testing with Svelte! When I last tried to find how to unit test with Svelte at the end of 2019 it seemed that was something that wasn’t yet possible. Svelte still says there’s no good answer to this yet so I’d taken their word for it. But it’s very possible!

This together with the recently released TypeScript support really feels like a game changer for using Svelte in bigger projects and pushing it as an alternative when working with clients and colleagues.

So how do you do it?

According to the setup page that should be enough. For me, that was not the case. All import statements in .js files broke when I ran the tests. Svelte takes care of .svelte files, so those imports work. But if you’ve written Svelte apps before, you might know that sometimes you include regular .js files for utils or services, and they might use import statements too. The case for me was my stores.js that had import { writable } from 'svelte/stores', as well as all of my test files.

The test files are all .js files, unless you work with TypeScript, so imports will be broken there too.

Some error messages you might come across:

Test suite failed to run
import ‘@testing-library/jest-dom/extend-expect’;
SyntaxError: Unexpected string


Jest encountered an unexpected token
import { render, fireEvent } from ‘@testing-library/svelte’;
SyntaxError: Unexpected token {

You could of course get around this by using require() instead of importthroughout your app. The Testing Library says Babel and TypeScript are optional, but I’m not sure I agree. I don’t know of anyone who uses requirestatements for imports in a frontend application. This leads us to…

2. Setup Babel for Jest

3. That’s it. Your tests should run.

I didn’t really find anyone else with this problem because everyone seemed to be using Babel or Typescript from the start.

Tips for testing Svelte components

Here are some tips on how to test events, and how to render the components in the test files.

Here are some more good to knows for using jest-svelte.

Let me know if this helped you out, if it’s not working for you, or if something’s missing!

Thanks for reading ❤

– Bill Kurtson, Senior Frontend-developer

Andra nyheter

Hej Joachim!

  Vi växer! Varmt välkommen säger vill Joachim som äntligen har börjat hos oss. Joachim som är fullstack-utvecklare har en gedigen erfarenhet ifrån flertalet branscher,

Läs mer »

Välkommen Martin!

  Dags att presentera ännu en ny stjärna. Varmt välkommen till oss Martin! Martin är fullstack-utvecklare och försvinner rakt ut i ett spännande uppdrag hos

Läs mer »


B3 CodeRight AB
Tegnérgatan 23
101 20 Stockholm

hello (@) coderight.se

08-410 143 40


Vi utvecklar och underhåller innovativa och säkra lösningar som hjälper företag att effektivisera sin verksamhet och utveckla sitt erbjudande – både i och utanför molnet. Detta gör vi genom att erbjuda expertis i hela utvecklingsprocessen – från arkitektur och projektledning till utveckling och test.