Setup
We recommend using Vitest, but you're free to use the library with any test runner that's ESM compatible.
Vitest
Add development dependencies
@testing-library/svelte
@testing-library/jest-dom
(Optional, but highly recommended)@sveltejs/vite-plugin-svelte
vitest
jsdom
,happy-dom
, or other Vitest DOM environment
- npm
- Yarn
npm install --save-dev \
@testing-library/svelte \
@testing-library/jest-dom \
@sveltejs/vite-plugin-svelte \
vitest \
jsdomyarn add --dev \
@testing-library/svelte \
@testing-library/jest-dom \
@sveltejs/vite-plugin-svelte \
vitest \
jsdomOptionally install
@vitest/ui
, which opens a UI within a browser window to follow the progress and interact with your tests.- npm
- Yarn
npm install --save-dev @vitest/ui
yarn add --dev @vitest/ui
Add a
vitest-setup.js
file to optionally set up automatic post-test cleanup and@testing-library/jest-dom
expect matchers.vitest-setup.jsimport '@testing-library/svelte/vitest'
import '@testing-library/jest-dom/vitest'Add
vitest.config.js
, or update your existingvite.config.js
, to process Svelte files, resolve browser exports during tests, use the jsdom (or happy-dom) environment, and run your setup file.vitest.config.jsimport {defineConfig} from 'vitest/config'
import {svelte} from '@sveltejs/vite-plugin-svelte'
export default defineConfig(({mode}) => ({
plugins: [svelte()],
resolve: {
conditions: mode === 'test' ? ['browser'] : [],
},
test: {
environment: 'jsdom',
setupFiles: ['./vitest-setup.js'],
},
}))notePrepending the
browser
resolve condition to Vite's default conditions may cause issues if you have a complex Vite configuration or dependencies that cannot be loaded into Node.jsSee testing-library/svelte-testing-library#222 for more information and alternative configuration options to ensure Svelte's browser bundle is used.
Add test scripts to your
package.json
to run the tests with Vitestpackage.json{
"scripts": {
"test": "vitest run",
"test:ui": "vitest --ui",
"test:watch": "vitest"
}
}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
- Yarn
npm test
yarn test
Jest
@testing-library/svelte
is ESM-only, which means
you must use Jest in ESM mode.
Add development dependencies
@testing-library/svelte
@testing-library/jest-dom
(Optional, but highly recommended)svelte-jester
jest
jest-environment-jsdom
- npm
- Yarn
npm install --save-dev \
@testing-library/svelte \
@testing-library/jest-dom \
svelte-jester \
jest \
jest-environment-jsdomyarn add --dev \
@testing-library/svelte \
@testing-library/jest-dom \
svelte-jester \
jest \
jest-environment-jsdomAdd a
jest-setup.js
file to configure@testing-library/jest-dom
, if using.jest-setup.jsimport '@testing-library/jest-dom'
Configure Jest to use jsdom, transform Svelte files, and use your setup file
jest.config.jsmodule.exports = {
"transform": {
"^.+\\.svelte$": "svelte-jester"
},
"moduleFileExtensions": ["js", "svelte"],
"extensionsToTreatAsEsm": ["svelte"]
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["<rootDir>/jest-setup.js"]
}Add the following to your
package.json
package.json{
"scripts": {
"test": "npx --node-options=\"--experimental-vm-modules\" jest src",
"test:watch": "npx --node-options=\"--experimental-vm-modules\" jest src --watch"
}
}Create your component + test file (checkout the rest of the docs to see how) and run it
- npm
- Yarn
npm test
yarn test
TypeScript and preprocessors
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.
If you'd like include any other Svelte preprocessors, see
the svelte-jester
docs.