Our story.

Setup Jest unit testing with Svelte

Dela

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

or

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

Säg hej till Johan!

”Jag har flertalet uppdrag inom Microsoft PowerPlatform för tillfället vilket är väldigt roligt. Lösningarna går snabbt att ta fram och förvaltningskostnaderna hålls nere.” Berätta. Vad

Läs mer »

Kontakt

B3 CodeRight AB
Kungsbron 2
111 20 Stockholm

hello@coderight.se

08-410 143 40

Affärsidé

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.