1. jest-vue
Jest Vue transform
jest-vue
Package: jest-vue
Last modified: Fri, 06 May 2022 12:50:00 GMT
Version: 0.8.2
License: MIT
Downloads: 3,207

Install

npm install jest-vue
yarn add jest-vue

jest-vue

Jest Vue transformer with source map support

DEPRECATED

this package has been renamed to vue-jest

You can download vue-jest with the following command:

npm install --save-dev vue-jest

Usage

npm install --save-dev jest-vue

Setup

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

"transform": {
  ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
},

To use source maps, you need to set mapCoverage to true. A full config will look like this.

 {
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
    },
    "mapCoverage": true
  }
}

Example Projects

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

Supported langs

jest-vue compiles the script and template of SFCs into a JavaScript file that Jest can run. It does not currently compile the style section.

Supported script languages

  • typescript (lang="ts", lang="typescript")
  • coffeescript (lang="coffee", lang="coffeescript")

Supported template languages

  • pug (lang="pug")
  • jade (lang="jade")

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin