Setup
We recommend using Vitest but you're free to use the library with any testing framework and runner you're comfortable with.
Vitest
Install Vitest and jsdom
npm install --save-dev vitest jsdom
Add the following to your
package.json
{
"scripts": {
"test": "vitest run src",
"test:watch": "vitest src"
}
}You'll need to compile the Svelte components before using them in Vitest, so you need to install @sveltejs/vite-plugin-svelte and Vite
```
npm install --save-dev @sveltejs/vite-plugin-svelte vite
```
Add a
vitest.config.ts
configuration file to the root of your projectimport { defineConfig } from 'vitest/config';
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
plugins: [svelte({ hot: !process.env.VITEST })],
test: {
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
globals: true,
environment: 'jsdom'
}
});This is optional but it is recommended, you can install jest-dom to add handy assertions to Jest
5.1 Install
jest-dom
npm install --save-dev @testing-library/jest-dom
5.2 import
@testing-library/jest-dom
at the start of your test filesimport '@testing-library/jest-dom';
Create your component and a test file (checkout the rest of the docs to see how) and run the following command to run the tests.
npm run test
SvelteKit
To use Vitest with SvelteKit install vitest-svelte-kit
, which includes a preconfigured Vitest configuration for SvelteKit projects.
You can take a look at the vitest-svelte-kit
configuration docs for further instructions.
Jest
Install Jest & jest-environment-jsdom
npm install --save-dev jest jest-environment-jsdom
Add the following to your
package.json
{
"scripts": {
"test": "jest src",
"test:watch": "npm run test -- --watch"
}
}You'll need to compile the Svelte components before using them in Jest, so we need to install svelte-jester
- npm
- Yarn
npm install --save-dev svelte-jester
yarn add --dev svelte-jester
Add the following Jest configuration to your
package.json
{
"jest": {
"transform": {
"^.+\\.svelte$": "svelte-jester"
},
"moduleFileExtensions": ["js", "svelte"],
"testEnvironment": "jsdom"
}
}If you are using ES6 modules in your project you have to add Jest's babel transform setting (it is set by default, but since we are overriding the transform config, we have to add it explicitly)
5.1 Install
babel-jest
- npm
- Yarn
npm install --save-dev babel-jest
yarn add --dev babel-jest
5.2. Add a basic
.babelrc
configuration{
"presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
}5.3. Update the Jest transform configuration
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": "svelte-jester"
},This is optional but it is recommended, you can install jest-dom to add handy assertions to Jest
6.1 Install
jest-dom
- npm
- Yarn
npm install --save-dev @testing-library/jest-dom
yarn add --dev @testing-library/jest-dom
6.2 Add the following to your Jest configuration in
package.json
{
"setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
}Create your component + test file (checkout the rest of the docs to see how) and run it
- npm
- Yarn
npm run test
yarn run test
Typescript
To use Typescript with Jest, you'll need to install and configure svelte-preprocess
and
ts-jest
. For full instructions, see the
svelte-jester
docs.
Preprocessors
If you'd like to also include any Svelte preprocessors then simply follow the instructions over at svelte-jester.