vue-jest

What is vue-jest?

vue-jest is a Jest transformer for Vue single-file components (SFCs). It allows you to use Jest to test Vue components by transforming the .vue files into a format that Jest can understand.

What are vue-jest's main functionalities?

Transform Vue SFCs

This feature allows Jest to transform Vue single-file components (.vue files) so that they can be tested. The code sample shows how to configure Jest to use vue-jest for transforming .vue files.

module.exports = { transform: { '^.+\.vue$': 'vue-jest' } };

Mocking Vue Components

This feature allows you to mock Vue components and their dependencies during testing. The code sample demonstrates how to use vue-jest with @vue/test-utils to shallow mount a component and mock a translation function.

import { shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('renders a message', () => {
  const wrapper = shallowMount(MyComponent, {
    mocks: {
      $t: msg => msg
    }
  });
  expect(wrapper.text()).toContain('Hello World');
});

Snapshot Testing

This feature allows you to perform snapshot testing on Vue components. The code sample shows how to use vue-jest with @vue/test-utils to create a snapshot of a component's rendered HTML and compare it to a saved snapshot.

import { shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('matches snapshot', () => {
  const wrapper = shallowMount(MyComponent);
  expect(wrapper.html()).toMatchSnapshot();
});

Other packages similar to vue-jest

vue-test-utils

vue-test-utils is the official testing utility library for Vue.js. It provides methods to mount and interact with Vue components in tests. While vue-jest focuses on transforming .vue files for Jest, vue-test-utils provides a more comprehensive set of utilities for testing Vue components.

jest-vue-preprocessor

jest-vue-preprocessor is another Jest transformer for Vue single-file components. It is similar to vue-jest in that it transforms .vue files for Jest, but it is less commonly used and lacks some of the additional features and community support that vue-jest offers.

babel-jest

babel-jest is a Jest transformer that uses Babel to transform JavaScript files. While it is not specific to Vue, it can be used in conjunction with other tools to transform Vue components. It is more general-purpose compared to vue-jest, which is specifically designed for Vue SFCs.

README

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.

"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 and Stylus are the only style languages that are compiled.

Supported script languages

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

Supported template languages

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

Supported style languages

• stylus (lang="stylus", lang="styl")
• scss (lang="scss")
  • To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at jest.globals['vue-jest'].resources.scss:

  // package.json
  {
    "jest": {
      "globals": {
        "vue-jest": {
          "resources": {
            "scss": [
              "./node_modules/package/_mixins.scss",
              "./src/assets/css/globals.scss"
            ]
          }
        }
      }
    }
  }