@vue/cli-plugin-unit-jest

What is @vue/cli-plugin-unit-jest?

@vue/cli-plugin-unit-jest is a plugin for Vue CLI that adds support for unit testing Vue components using Jest. It provides a seamless integration with Vue CLI projects, allowing developers to write and run unit tests with ease.

What are @vue/cli-plugin-unit-jest's main functionalities?

Unit Testing Vue Components

This feature allows you to write unit tests for your Vue components using Jest. The provided code sample shows how to configure Jest with Vue CLI and write a simple test for a Vue component.

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: ['**/tests/unit/**/*.spec.js'],
};

// Example test file: tests/unit/HelloWorld.spec.js
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

Snapshot Testing

Snapshot testing allows you to capture the rendered output of a Vue component and compare it to a saved snapshot. This helps in ensuring that the UI does not change unexpectedly.

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

describe('HelloWorld.vue', () => {
  it('matches the snapshot', () => {
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg: 'Hello World' }
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
});

Mocking Dependencies

This feature allows you to mock dependencies like API calls in your unit tests. The provided code sample shows how to mock an axios GET request and test a Vue component that fetches data from an API.

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

jest.mock('axios');

describe('MyComponent.vue', () => {
  it('fetches data from API', async () => {
    const data = { data: 'some data' };
    axios.get.mockResolvedValue(data);
    const wrapper = shallowMount(MyComponent);
    await wrapper.vm.fetchData();
    expect(wrapper.vm.data).toBe('some data');
  });
});

Other packages similar to @vue/cli-plugin-unit-jest

jest

Jest is a delightful JavaScript testing framework with a focus on simplicity. It works with projects using Babel, TypeScript, Node.js, React, Angular, Vue.js, and Svelte. Compared to @vue/cli-plugin-unit-jest, Jest is more general-purpose and can be used with a variety of JavaScript frameworks and libraries.

mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Unlike @vue/cli-plugin-unit-jest, Mocha does not come with built-in support for Vue.js and requires additional setup for integration.

karma

Karma is a test runner for JavaScript that runs on Node.js. It is designed to work with any JavaScript framework and is highly configurable. Karma is often used in conjunction with other testing frameworks like Mocha or Jasmine. Compared to @vue/cli-plugin-unit-jest, Karma is more focused on running tests in real browsers and provides more flexibility in terms of configuration.

README

@vue/cli-plugin-unit-jest

unit-jest plugin for vue-cli

Injected Commands

• vue-cli-service test:unit

  Run unit tests with Jest. Default testMatch is <rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) which matches:

  • Any files in tests/unit that end in .spec.(js|jsx|ts|tsx);
  • Any js(x)/ts(x) files inside __tests__ directories.

  Usage: vue-cli-service test:unit [options] <regexForTestFiles>

  All Jest command line options are also supported.

Debugging Tests

Note that directly running jest will fail because the Babel preset requires hints to make your code work in Node.js, so you must run your tests with vue-cli-service test:unit.

If you want to debug your tests via the Node inspector, you can run the following:

# macOS or linux
node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit --runInBand

# Windows
node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit --runInBand

Configuration

Jest can be configured via jest.config.js in your project root, or the jest field in package.json.

Installing in an Already Created Project

vue add unit-jest

Transform dependencies from /node_modules

By default, jest doesn't transform anything from /node_modules.

Since jest runs in node, we also don't have to transpile anything that uses modern ECMAScript features as Node >=8 already supports these features, so it's a sensible default. cli-plugin-jest also doesn't respect the transpileDependencies option in vue.config.js for the same reason.

However, we have (at least) three cases where we do need to transpile code from /node_modules in jest:

• Usage of ES6 import/export statements, which have to be compiled to commonjs module.exports
• Single File Components (.vue files) which have to be run through vue-jest
• Typescript code

To do this, we need to add an exception to the transformIgnorePatterns option of jest. This is its default value:

transformIgnorePatterns: ['/node_modules/']

We have to add exceptions to this pattern with a RegExp negative lookahead:

transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)']

To exclude multiple libraries:

transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)']

Changelog

4.2.1 (2020-02-07)

:bug: Bug Fix

• @vue/cli-ui
  • 776275d fix: add graphql-server.js to npm files (@sodatea)

:memo: Documentation

• #5126 fix(docs): new travis CLI interface (@iliyaZelenko)
• #5122 Add a demo for multiple loaders (Chinese doc) (@FrankFang)
• #5094 docs: [RU] Translation update (@Alex-Sokolov)
• #5081 line 47 according to english version (@defead)
• #5076 Add a demo for multiple loaders (@FrankFang)
• #5079 Mention that Vue CLI should be installed in Prototyping guide (@NataliaTepluhina)
• #5078 Fix a typo in migration guide (@NataliaTepluhina)
• #5055 docs: mention the precedence of .vue & .ts(x) extensions (@sodatea)
• #5019 Updated zh-cn translation in cli section (@mactanxin)

Committers: 8

• Alexander Sokolov (@Alex-Sokolov)
• Frank Fang (@FrankFang)
• Haoqun Jiang (@sodatea)
• Natalia Tepluhina (@NataliaTepluhina)
• Xin Tan (@mactanxin)
• @defead
• Илья (@iliyaZelenko)
• 小新 (@llccing)