vue-jest

Jest Vue transformer with source map support

Usage

npm install --save-dev vue-jest

Setup

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

{
  "jest": {
    "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 Projects

Example repositories testing Vue components with jest and vue-jest:

• Avoriaz with Jest
• Vue Test Utils with 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")

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"
      }
    }
  }
}

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"
              ]
            }
          }
        }
      }
    }

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
      }
    }
  }
}