The Jest Configuration in The Svelte Application
Tags: svelte, jest, javascript, tutorial
Published: 2022-05-27 22:33:58

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9smh4dqvxm54ep0k9gk.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7n0yqvd07tttes7gvmh.png)  

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


![package.json script for tests "test":"jest --watch"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p370jqqt04djpuvetir2.png) 

When  I executed this commende I saw this: 

![test executed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19dnjaube2vckw06hemi.png)

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: 

```javascript
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: 


![error Cannot use import statement outside a module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qby291f4zj63ptjcu6s1.png)

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: 

```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 

```json
"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: 

```javascript
module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]],	
};
```
But I had still an error. This time it's wrong test environment: 

![wrong test environment error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvu3f8d2exngj4mefiee.png)

So I need to install one more package:

`npm i -D jest-environment-jsdom`

and update jest configuration in package.json: 

```json
"jest": {
    "transform": {
      "^.+\\.svelte$": "svelte-jester",
      "^.+\\.js$": "babel-jest"
    },
    "testEnvironment": "jsdom"
  }
```
But also App.spec.js:

```javascript
/**
 * @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:

![last error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zn828zv70qpfgrphks6.png)

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

```javascript
<main>
    <h1>Hello word!</h1>
</main>
```
And now test is green: 

![green test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d510wy4rtc4qyqml1s2e.png)

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