/svelte-jester

A Jest transformer for Svelte - compile your components before importing them into tests.

Primary LanguageJavaScriptMIT LicenseMIT

svelte-jester

Simply precompiles Svelte components before importing them into Jest tests.

version MIT License

Table of Contents

Why not just use x?

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

Installation

This library has peerDependencies listings for svelte >= 3.

npm install svelte-jester -D

Add the following to your Jest config

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

Babel

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" } }]]
}

TypeScript

To enable TypeScript support you'll need to setup svelte-preprocess and ts-jest.

  1. Install typescript, svelte-preprocess, and ts-jest:

    npm install typescript svelte-preprocess ts-jest -D

  2. Create a svelte.config.js at the root of your project:

    const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess({
    // ...
  }),
};

    To learn what options you can pass to sveltePreprocess, please refer to the documentation.

  3. In your Jest config, enable preprocessing for svelte-jester, and add ts-jest as a transform:

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

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 the ts-jest docs.

Preprocess

Preprocessors are loaded from svelte.config.js.

Add the following to your Jest config

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

Create a svelte.config.js file and configure it, see svelte-preprocess for more information.

Options

preprocess (default: false): Pass in true if you are using Svelte preprocessors. They are loaded from svelte.config.js.

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

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

"transform": {
  "^.+\\.js$": "babel-jest",
  "^.+\\.svelte$": ["svelte-jester", { 
    "preprocess": false,
    "debug": false,
    "compilerOptions": {}
  }]
}

Testing Library

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

Credits

Thanks to all contributors, inspired by:

LICENSE

MIT