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:

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:

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

When I executed this commende I saw this:

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()
});

When I executed the test I had this error:

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"
    }
  }

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"
    }
  }

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" } }]],  
};

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

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"
  }

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()
})

This time all is ready to use the tests:

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

<main>
    <h1>Hello word!</h1>
</main>

And now test is green:

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