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.
Top comments (1)
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:
`
and normally it works.