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 might look like this:
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run.
- typescript (
lang="ts",lang="typescript") - coffeescript (
lang="coffee",lang="coffeescript")
vue-jest uses consolidate to compile template languages. See the list of supported engines.
Note: engines that compile asynchronously are not supported
To pass options to the language compiler, add them to the vue-jest options:
{
"jest": {
"globals": {
"vue-jest": {
"pug": {
"basedir": "mybasedir"
}
}
}
}
}-
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" ] } } } } }
-
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
experimentalCSSCompile: Boolean Default true. Turn off CSS compilation
hideStyleWarn: Boolean Default false. Hide warnings about CSS compilation
{
"jest": {
"globals": {
"vue-jest": {
"hideStyleWarn": true,
"experimentalCSSCompile": true
}
}
}
}vue-jest uses babel-jest to resolve 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.