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

npm install --save-dev vue-jest

Setup

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

{
  "jest": {
    "transform": {
      "^.+\\.vue$": "vue-jest"
    }
}

A full config will look like this.

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
  }
}

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:

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:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": false
      }
    }
  }
}

Object

Provide inline Babel options:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": {
          "presets": [
            [
              "env",
              {
                "useBuiltIns": "entry",
                "shippedProposals": true
              }
            ]
          ],
          "plugins": [
            "syntax-dynamic-import"
          ],
          "env": {
            "test": {
              "plugins": [
                "dynamic-import-node"
              ]
            }
          }
        }
      }
    }
  }
}

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.

{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": "path/to/.babelrc.js"
      }
    }
  }
}

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

{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": {
          "configFile": "path/to/babel.config.js"
        }
      }
    }
  }
}

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:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "tsConfig": {
          "importHelpers": true
        }
      }
    }
  }
}

String

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

{
  "jest": {
    "globals": {
      "vue-jest": {
        "tsConfig": "path/to/tsconfig.json"
      }
    }
  }
}

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().

  {
    "jest": {
      "globals": {
        "vue-jest": {
          "pug": {
            "basedir": "mybasedir"
          }
        }
      }
    }
  }

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:
```
{
  "jest": {
    "globals": {
      "vue-jest": {
        "resources": {
          "scss": [
            "./node_modules/package/_mixins.scss",
            "./src/assets/css/globals.scss"
          ]
        }
      }
    }
  }
}
```
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:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "hideStyleWarn": true,
        "experimentalCSSCompile": true
      }
    }
  }
}

22 Versions

5.0.0-alpha.9 ... 4 years ago
5.0.0-alpha.8 ... 5 years ago
5.0.0-alpha.7 ... 5 years ago
5.0.0-alpha.6 ... 5 years ago
5.0.0-alpha.5 ... 5 years ago
5.0.0-alpha.3 ... 5 years ago
5.0.0-alpha.2 ... 5 years ago
5.0.0-alpha.10 ... 4 years ago
5.0.0-alpha.1 ... 5 years ago
4.0.1 ... 4 years ago
4.0.0-rc.1 ... 5 years ago
4.0.0-beta.6 ... 5 years ago
4.0.0-beta.5 ... 5 years ago
4.0.0-beta.4 ... 5 years ago
4.0.0-beta.3 ... 5 years ago
4.0.0 ... 5 years ago
3.0.7 ... 5 years ago
3.0.5 ... 6 years ago
4.0.0-beta.2 ... 7 years ago
5.0.0-alpha.0 ... 5 years ago
1.4.0 ... 8 years ago
2.6.0 ... 7 years ago

vue-jest

Usage

Setup

Example Projects

Supported langs

Supported script languages

Global Jest options

babelConfig

Boolean

Object

String

tsConfig

Boolean

Object

String

Supported template languages

Supported style languages

CSS options

Current Tags

22 Versions