vue-jest

Jest Vue transformer with source map support

NOTE: This is documentation for vue-jest@3.x. View the vue-jest@2.x documentation

Usage

1npm install --save-dev vue-jest

Setup

To define vue-jest as a transformer for your .vue files, map them to the vue-jest module:

1{
2  "jest": {
3    "transform": {
4      "^.+\\.vue$": "vue-jest"
5    }
6}

A full config will look like this.

1{
2  "jest": {
3    "moduleFileExtensions": [
4      "js",
5      "json",
6      "vue"
7    ],
8    "transform": {
9      "^.+\\.js$": "babel-jest",
10      "^.+\\.vue$": "vue-jest"
11    }
12  }
13}

If you're on a version of Jest older than 22.4.0, you need to set mapCoverage to true in order to use source maps.

Example Projects

Example repositories testing Vue components with jest and vue-jest:

• Avoriaz with Jest
• Vue Test Utils with Jest

Supported langs

vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. Currently, SCSS, SASS and Stylus are the only style languages that are compiled.

Supported script languages

• typescript (lang="ts", lang="typescript")
• coffeescript (lang="coffee", lang="coffeescript")

Global Jest options

You can change the behavior of vue-jest by using jest.globals.

Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a .js file

babelConfig

Provide babelConfig in one of the following formats:

• <Boolean>
• <Object>
• <String>

Boolean

• true - Enable Babel processing. vue-jest will try to find Babel configuration using find-babel-config.

This is the default behavior if babelConfig is not defined.

• false - Skip Babel processing entirely:

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "babelConfig": false
6      }
7    }
8  }
9}

Object

Provide inline Babel options:

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "babelConfig": {
6          "presets": [
7            [
8              "env",
9              {
10                "useBuiltIns": "entry",
11                "shippedProposals": true
12              }
13            ]
14          ],
15          "plugins": [
16            "syntax-dynamic-import"
17          ],
18          "env": {
19            "test": {
20              "plugins": [
21                "dynamic-import-node"
22              ]
23            }
24          }
25        }
26      }
27    }
28  }
29}

String

If a string is provided, it will be an assumed path to a babel configuration file (e.g. .babelrc, .babelrc.js).

• Config file should export a Babel configuration object.
• Should not point to a project-wide configuration file (babel.config.js), which exports a function.

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "babelConfig": "path/to/.babelrc.js"
6      }
7    }
8  }
9}

To use the Config Function API, use inline options instead. i.e.:

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "babelConfig": {
6          "configFile": "path/to/babel.config.js"
7        }
8      }
9    }
10  }
11}

tsConfig

Provide tsConfig in one of the following formats:

• <Boolean>
• <Object>
• <String>

Boolean

• true - Process TypeScript files using custom configuration. vue-jest will try to find TypeScript configuration using tsconfig.loadSync.

This is the default behavior if tsConfig is not defined.

• false - Process TypeScript files using the default configuration provided by vue-jest.

Object

Provide inline TypeScript compiler options:

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "tsConfig": {
6          "importHelpers": true
7        }
8      }
9    }
10  }
11}

String

If a string is provided, it will be an assumed path to a TypeScript configuration file:

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "tsConfig": "path/to/tsconfig.json"
6      }
7    }
8  }
9}

Supported template languages

• pug (lang="pug")

  • To give options for the Pug compiler, enter them into the Jest configuration. The options will be passed to pug.compile().

  1  {
  2    "jest": {
  3      "globals": {
  4        "vue-jest": {
  5          "pug": {
  6            "basedir": "mybasedir"
  7          }
  8        }
  9      }
  10    }
  11  }

• jade (lang="jade")

• haml (lang="haml")

Supported style languages

• stylus (lang="stylus", lang="styl")
• sass (lang="sass")
  • The SASS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.
• scss (lang="scss")

  • The SCSS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.

  • To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at jest.globals['vue-jest'].resources.scss:

    1{
    2  "jest": {
    3    "globals": {
    4      "vue-jest": {
    5        "resources": {
    6          "scss": [
    7            "./node_modules/package/_mixins.scss",
    8            "./src/assets/css/globals.scss"
    9          ]
    10        }
    11      }
    12    }
    13  }
    14}

• postcss (lang="pcss", lang="postcss")

CSS options

experimentalCSSCompile: Boolean Default true. Turn off CSS compilation hideStyleWarn: Boolean Default false. Hide warnings about CSS compilation resources:

1{
2  "jest": {
3    "globals": {
4      "vue-jest": {
5        "hideStyleWarn": true,
6        "experimentalCSSCompile": true
7      }
8    }
9  }
10}