README.md

vue-jest

Jest transformer for Vue single file components

Note: These are the docs for v4—for older documentation see the v3 docs

Usage

npm install --save-dev vue-jest

Setup

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

Examples

• Vue Test Utils with Jest

Supported langs

vue-jest compiles <script />, <template />, and <style /> blocks with supported lang attributes into JavaScript that Jest can run.

Script languages

• TypeScript (ts, typescript)
• CoffeeScript (coffee, coffeescript)

Template languages

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 jest.globals.vue-jest:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "pug": {
          "basedir": "mybasedir"
        }
      }
    }
  }
}

Style languages

• Stylus (stylus, styl)

• Sass (sass)

  • The SASS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.

• SCSS (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"
              ]
            }
          }
        }
      }
    }

Configuration

You can configure vue-jest with jest.globals.

Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a .js file

options

experimentalCSSCompile: Boolean Turn off CSS compilation (default true)

hideStyleWarn: Boolean Hide warnings about CSS compilation (default false)

{
  "jest": {
    "globals": {
      "vue-jest": {
        "hideStyleWarn": true,
        "experimentalCSSCompile": true
      }
    }
  }
}

babel options

vue-jest uses babel-jest to resolve babel options.

tsconfig

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.