TheCycoONE / vue-jest

Jest Vue transformer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

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

About

Jest Vue transformer

License:MIT License


Languages

Language:JavaScript 81.5%Language:Vue 13.0%Language:CSS 4.2%Language:Shell 1.0%Language:HTML 0.2%