Jest Vue transformer with source map support
npm install --save-dev vue-jestTo define vue-jest as a transformer for your .vue files, you need to map .vue files 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")
To define a tsconfig file that vue-jest will use when transpiling typescript, you can specify it in the jest globals
{
"jest": {
"globals": {
"vue-jest": {
"tsConfigFile": "tsconfig.jest.json"
}
}
}
}To define a babelrc file that vue-jest will use when transpiling javascript, you can specify it in the jest globals
{
"jest": {
"globals": {
"vue-jest": {
"babelRcFile": "jest.babelrc"
}
}
}
}-
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
}
}
}
}