Jest Svelte Transformer

svelte component transformer to compile svelte 3 components on the fly for tests files, with preprocessors and compile options

A way to load svelte files in tests, while allowing setup for preprocessors and compile options.


npm install -D jest-svelte-transformer


In your package.json add these lines:

"jest": {
  "transform": {
    "^.+\\.svelte$": "jest-svelte-transformer"

To add preprocessors you can create a config file at the root of your project named jest-svelte-transformer.config.js. Here is an example of what you could have in this file:

const presetenv = require('postcss-preset-env')
const postcss = require('postcss')

module.exports = {
  preprocessors: {
    async style ({ content: code }) {
      const { css } = await postcss([presetenv({
        "stage": 0,

        "features": {
          "calc": false
      })]).process(code, { from: undefined })

      return { code: css }

  compileOptions: {
    dev: true,
    immutable: true

Preprocessors and compile options config follows the svelte api (,

If you don't need preprocessors but only compile options, you can put the config into an rc file .jest-svelte-transformerrc Like so:

  "compileOptions": {
    "dev": true,
    "immutable": true

Babel is used to transpile svelte compiled code so that it could be loaded as a commonjs module, so any babel config set up in your project will also be used to transpile svelte compiled code.


By setting LOG_LEVEL environment variable to trace you can see config loading errors, like so for example:

LOG_LEVEL=trace npm test -- widget.test.js

Top categories

Loading Svelte Themes