Jest transformer for Vue single file components
npm install --save-dev vue-jestTo 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 repositories testing Vue components with jest and vue-jest:
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.
- typescript (
lang="ts",lang="typescript") - coffeescript (
lang="coffee",lang="coffeescript")
vue-jest uses babel-jest to resolve your babel options.
vue-jest uses ts-jest to resolve your tsconfig file.
If you wish to pass in a custom location for your tsconfig file, use the ts-jest configuration 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
.jsfile
-
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")
-
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" ] } } } } }
-
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
}
}
}
}