nativescript-vue-jest
by pietdevries94 | v3.0.4
Jest Vue transform
npm i --save nativescript-vue-jest

nativescript-vue-jest

Jest Vue transformer with source map support and Nativescript support. Fork of vue-jest.

This transformer defaults to web templates. To change that, change globals.vue-jest.platform to the desired platform.

NOTE: This is documentation for vue-jest@3.x. View the vue-jest@2.x documentation

Usage

npm install --save-dev nativescript-vue-jest

Setup

To define nativescript-vue-jest as a transformer for your .vue files, map them to the nativescript-vue-jest module:

{
"jest": {
"transform": {
"^.+\\.vue$": "nativescript-vue-jest"
}
}

A full config will look like this.

{
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "nativescript-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:

Supported langs

nativescript-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")

Global Jest options

You can change the behavior of nativescript-vue-jest by using jest.globals.

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

babelConfig

Provide babelConfig in one of the following formats:

  • <Boolean>
  • <Object>
  • <String>
Boolean
  • true - Enable Babel processing. vue-jest will try to find Babel configuration using find-babel-config.

This is the default behavior if babelConfig is not defined.

  • false - Skip Babel processing entirely:
{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": false
}
}
}
}
Object

Provide inline Babel options:

{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": {
"presets": [
[
"env",
{
"useBuiltIns": "entry",
"shippedProposals": true
}
]
],
"plugins": [
"syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
]
}
}
}
}
}
}
}
String

If a string is provided, it will be an assumed path to a babel configuration file (e.g. .babelrc, .babelrc.js).

{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": "path/to/.babelrc.js"
}
}
}
}

To use the Config Function API, use inline options instead. i.e.:

{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": {
"configFile": "path/to/babel.config.js"
}
}
}
}
}

tsConfig

Provide tsConfig in one of the following formats:

  • <Boolean>
  • <Object>
  • <String>
Boolean
  • true - Process TypeScript files using custom configuration. vue-jest will try to find TypeScript configuration using tsconfig.loadSync.

This is the default behavior if tsConfig is not defined.

Object

Provide inline TypeScript compiler options:

{
"jest": {
"globals": {
"vue-jest": {
"tsConfig": {
"importHelpers": true
}
}
}
}
}
String

If a string is provided, it will be an assumed path to a TypeScript configuration file:

{
"jest": {
"globals": {
"vue-jest": {
"tsConfig": "path/to/tsconfig.json"
}
}
}
}

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