DEV Community

Cover image for The Jest Configuration in The Svelte Application
Deotyma
Deotyma

Posted on

The Jest Configuration in The Svelte Application

Svelte.js is a framework more and more populate. If we believe to it's creator Rich Harris it will be soon the most populate framework in front-end development.
Recently I have created a svelte application and I would like to test it with Jest. To configured Jest correctly it wasn't so easy that why I would like to show how I dit it.

For start my svelte project I used this command lignes:

npx degit sveltejs/template my-svelte-projec
cd my-svelte-project
npm install
npm run dev

So I had project like this:

teddy-blue project

Now all was ready to install the tests Jest and Testing Library and DOM fr Testing Library:

npm install --save-dev jest @testing-library/svelte @testing-library/user-event @testing-library/dom

In my package.json I verified if all is well installed:

package.json of Teddy-Blue

and I wrote a new script to execute tests in package.json:

package.json script for tests

When I executed this commende I saw this:

test executed

That because I haven't yet any test file.

I decided to test App.svelte if when it is executed it show "Hello word " text in browser. So I have created App.spec.js file with it's first test like this:

import App from "./App.svelte
import { render, screen } from "@testing-library/svelte";


it("has Hello header", () =>{
  render(App);
  const header = screen.getAllByText("Hello word!");
  expect(header).toBeTruthy()
});
Enter fullscreen mode Exit fullscreen mode

When I executed the test I had this error:

error Cannot use import statement outside a module

It is because Jest cant't read correctly App.svelte so for import it correctly I need a package which will transform this file in something more treatable for jest:

npm install svelte-jester -D

When svelte-jester is installed it's time to configured jest in package.json:

"jest":{
    "transform": {
      "^.+\\.svelte$": "svelte-jester"
    }
  }
Enter fullscreen mode Exit fullscreen mode

However, the error still exists because the App.spec.js file is written with ES6 syntax and Jest does not automatically recognize this syntax, so we need other packages to properly configure Jest:

npm i -D babel-jest @babel/preset-env

So I need to completed a jest configuration

"jest": {
    "transform": {
      "^.+\\.svelte$": "svelte-jester",
      "^.+\\.js$": "babel-jest"
    }
  }
Enter fullscreen mode Exit fullscreen mode

But it's not enough. It's necessary to configured also babel. So I have created a new file babel.config.js and I have written this code:

module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]],  
};
Enter fullscreen mode Exit fullscreen mode

But I had still an error. This time it's wrong test environment:

wrong test environment error

So I need to install one more package:

npm i -D jest-environment-jsdom

and update jest configuration in package.json:

"jest": {
    "transform": {
      "^.+\\.svelte$": "svelte-jester",
      "^.+\\.js$": "babel-jest"
    },
    "testEnvironment": "jsdom"
  }
Enter fullscreen mode Exit fullscreen mode

But also App.spec.js:

/**
 * @jest-environment jsdom
 */


import App from "./App.svelte"
import { render, screen } from "@testing-library/svelte";


it("has Hello header", () =>{
  render(App);
  const header = screen.getAllByText("Hello word!");
  expect(header).toBeTruthy()
})
Enter fullscreen mode Exit fullscreen mode

This time all is ready to use the tests:

last error

All works very well but It is necessary to update App.svelte:

<main>
    <h1>Hello word!</h1>
</main>
Enter fullscreen mode Exit fullscreen mode

And now test is green:

green test

I hope that it will help you to configured jest in svelte.

Top comments (1)

Collapse
 
deotyma profile image
Deotyma

When I used Svelte + Vite I had a little problem with the configuration of babel config. To solve this problem I created babel.config.cjs:

module.exports = {
  presets: [
     [
        '@babel/preset-env',
        {
           targets: {
              node: 'current'
           }
        }
     ]
  ]
};
Enter fullscreen mode Exit fullscreen mode


`
and normally it works.