Jest Vue transformer with source map support
npm install --save-dev vue-jest
To define vue-jest as a transformer for your .vue files, you need to map .vue files to the vue-jest module.
"transform": {
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
A full config will look like this.
{
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/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 and Stylus are the only style languages that are compiled.
- typescript (
lang="ts"
,lang="typescript"
) - coffeescript (
lang="coffee"
,lang="coffeescript"
)
- pug (
lang="pug"
) - jade (
lang="jade"
) - haml (
lang="haml"
)
- stylus (
lang="stylus"
,lang="styl"
) - scss (
lang="scss"
)- To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at
jest.globals['vue-jest'].resources.scss
:
// package.json { "jest": { "globals": { "vue-jest": { "resources": { "scss": [ "./node_modules/package/_mixins.scss", "./src/assets/css/globals.scss" ] } } } } }
- To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at