Repository files navigation

• Why not just use x?
• Installation
  • Manual installation
    • ESM version
    • CJS (CommonJS) version
  • Babel (only for CJS)
  • TypeScript
    • ESM version
    • CJS version
  • Preprocess
• Options
  • CJS mode options
• Testing Library
• Credits
• LICENSE

Seems like other libraries won't be working with preprocessors, won't be maintained actively or didn'thave proper licensing.

If you're using SvelteKit, you can set it up and install it withsvelte-add-jest by running:

npx apply rossyman/svelte-add-jest

This library haspeerDependencies listings forsvelte >= 3 andjest >= 27.

npm install svelte-jester -D

Add the following to your Jest config:

{"transform": {"^.+\\.svelte$":"svelte-jester"  },"moduleFileExtensions": ["js","svelte"],"extensionsToTreatAsEsm": [".svelte"]}

Run your tests withNODE_OPTIONS=--experimental-vm-modules. For Windows you need to addcross-env as well.

"test":"cross-env NODE_OPTIONS=--experimental-vm-modules jest src",

Add the following to your Jest config:

{"transform": {"^.+\\.svelte$":"./node_modules/svelte-jester/dist/transformer.cjs"  },"moduleFileExtensions": ["js","svelte"]}

npm install @babel/core @babel/preset-env babel-jest -D

Add the following to your Jest config

"transform": {"^.+\\.js$":"babel-jest","^.+\\.svelte$":"svelte-jester"}

Create a.babelrc and add the following

{"presets": [["@babel/preset-env", {"targets": {"node":"current" } }]]}

To enable TypeScript support you'll need to setupsvelte-preprocess andts-jest.

1. Installtypescript,svelte-preprocess, andts-jest:

   npm install typescript svelte-preprocess ts-jest -D

1. Create asvelte.config.js at the root of your project:

   importpreprocessfrom'svelte-preprocess'/**@type {import('@sveltejs/kit').Config} */exportdefaultconfig={preprocess:preprocess(),// ...};

   To learn what options you can pass tosveltePreprocess, please refer to thedocumentation.

2. In your Jest config, enable preprocessing forsvelte-jester, and addts-jest as a transform:

   "transform": {"^.+\\.svelte$": ["svelte-jester",    {"preprocess":true    }  ],"^.+\\.ts$": ["ts-jest",    {"useESM":true// optional: seperate tsconfig for tests//"tsconfig": "tsconfig.spec.json",    }  ],},"moduleFileExtensions": ["js","ts","svelte"],"extensionsToTreatAsEsm": [".svelte",".ts"],

However if you do not want to create asvelte.config.js at the root of yourproject or you wish to use a custom config just for tests, you may pass thepath to the config file to thepreprocess option thus:

"transform": {"^.+\\.svelte$": ["svelte-jester",      {"preprocess":"/some/path/to/svelte.config.js"      }    ],"^.+\\.ts$": ["ts-jest",      {"useESM":true// optional: seperate tsconfig for tests//"tsconfig": "tsconfig.spec.json",      }    ],  },"moduleFileExtensions": ["js","ts","svelte"  ],"extensionsToTreatAsEsm": [".svelte",".ts"  ],

1. Create asvelte.config.js at the root of your project:

   constsveltePreprocess=require("svelte-preprocess");module.exports={preprocess:sveltePreprocess({// ...}),};

   To learn what options you can pass tosveltePreprocess, please refer to thedocumentation.

2. In your Jest config, enable preprocessing forsvelte-jester, and addts-jest as a transform:

   "transform": {"^.+\\.svelte$": ["./node_modules/svelte-jester/dist/transformer.cjs",    {"preprocess":true    }  ],"^.+\\.ts$":"ts-jest"},"moduleFileExtensions": ["js","ts","svelte"]

However if you do not want to create asvelte.config.js at the root of yourproject or you wish to use a custom config just for tests, you may pass thepath to the config file to thepreprocess option thus:

"transform": {"^.+\\.svelte$": ["./node_modules/svelte-jester/dist/transformer.cjs",      {"preprocess":"/some/path/to/svelte.config.js"      }    ],"^.+\\.ts$":"ts-jest"  },"moduleFileExtensions": ["js","ts","svelte"  ]

Note that TypeScript supports ES modules, so if you were previously using babel-jest just for ES module transpilation, you can remove babel-jest, babel, and any associated presets and config.

By default, ts-jest will only transpile .ts files though, so if you want to continue using ES modules in .js files, you'll need to configure ts-jest to process .js files as well.To do this, update the file glob above, and follow the instructions in thets-jest docs.

Preprocessors are loaded fromsvelte.config.js orsvelte.config.cjs.

Add the following to your Jest config:

"transform": {"^.+\\.svelte$": ["svelte-jester", {"preprocess":true }]}

For CJS, replace"svelte-jester" with"./node_modules/svelte-jester/dist/transformer.cjs".

Create asvelte.config.js file and configure it, seesvelte-preprocess for more information.

In CJS mode,svelte-jester must start a new a process for each file needing to be preprocessed, which adds a performance overhead.

In ESM mode, this isn't necessary. You can setNODE_OPTIONS=--experimental-vm-modules and"extensionsToTreatAsEsm": [".svelte"] to run in ESM mode. However, be aware that ESM support in Jest is still experimental as according to theirdocs. Follow the development along atjestjs/jest#9430.

preprocess (default: false): Pass intrue if you are using Svelte preprocessors.They are loaded fromsvelte.config.js orsvelte.config.cjs.

debug (default: false): If you'd like to see the output of the compiled code then pass intrue.

svelteVersion (default: actual Version from Svelte package): If you'd like to override the svelteVersion for some reason.

compilerOptions (default: {}): Use this to pass inSvelte compiler options.

rootMode (default: ""): Pass inupward to walk up from the transforming file's directory and use the firstsvelte.config.js orsvelte.config.cjs found, or throw an error if no config file is discovered. This is particularly useful in a monorepo as it allows you to:

• Run tests from the worktree root using Jest projects where you only want to putsvelte.config.js in workspace folders, and not in the root.
• Run tests from the worktree root using Jest projects, but have differentsvelte.config.js configurations for individual workspaces.
• Have one commonsvelte.config.js in your worktree root (or any directory above the file being transformed) without needing individualsvelte.config.js files in each workspace.Note - this root config file can be overriden if necessary by putting another config file into a workspace folder

The default mode is to loadsvelte.config.js orsvelte.config.cjs from the current project root to avoid the risk of accidentally loading a config file from outside the current project folder.

Whenupward is set it will stop at the first config file it finds above the file being transformed, but will walk up the directory structure all the way to the filesystem root if it cannot find any config file. This means that if there is nosvelte.config.js orsvelte.config.cjs file in the project above the file being transformed, it is always possible that someone will have a forgotten config file in their home directory which could cause unexpected errors in your builds.

showConsoleLog (default: false): If you'd like to see console.logs of the preprocessors then pass intrue. Otherwise these will be surpressed, because the compiler could complain about unexpected tokens.

maxBuffer (default: 10485760): Sets limit for buffer whenpreprocess is true. It defines the largest amount of data in bytes allowed on stdout or stderr forchild_process.spawnSync. If exceeded, the child process is terminated and any output is truncated. The default value of 10Mb overrides Node's default value of 1Mb.

"transform": {"^.+\\.js$":"babel-jest","^.+\\.svelte$": ["./node_modules/svelte-jester/dist/transformer.cjs", {"preprocess":false,"debug":false,"compilerOptions": {},"rootMode":"","maxBuffer":15000000  }]}

This package is required when using Svelte with theTesting Library.If you'd like to avoid including implementation details in your tests, and making them moremaintainble in the long run, then consider checking out@testing-library/svelte.

Thanks to all contributors, inspired by:

• https://github.com/pngwn/svelte-test
• https://github.com/WeAreGenki/minna-ui
• https://github.com/rspieker/jest-transform-svelte

MIT