@vue/test-utils

What is @vue/test-utils?

@vue/test-utils is the official unit testing utility library for Vue.js. It provides methods to mount and interact with Vue components in an isolated manner, allowing developers to write unit tests for their Vue components effectively.

What are @vue/test-utils's main functionalities?

Mounting Components

Mounting components allows you to render a Vue component in a test environment and returns a wrapper that contains the mounted component and methods to interact with it.

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

const wrapper = mount(MyComponent);

Finding Elements

Finding elements within the mounted component using CSS selectors, Vue component options, or ref attributes, which can then be used to test the component's behavior.

const button = wrapper.find('button');

Simulating User Interaction

Simulating user interactions such as clicks, typing, or other events on the mounted component to test how it responds to user input.

button.trigger('click');

Accessing Component Data and Methods

Accessing the Vue instance's data, computed properties, and methods to assert their values and behavior within the test.

const vm = wrapper.vm;
console.log(vm.someData);

Stubbing Child Components

Stubbing child components to prevent their actual implementation from being rendered, which can simplify tests and improve test performance.

const wrapper = mount(MyComponent, {
  stubs: {
    ChildComponent: true
  }
});

Other packages similar to @vue/test-utils

enzyme

Enzyme is a JavaScript testing utility for React that is similar to @vue/test-utils but for React components. It allows for shallow rendering, full DOM rendering, and static rendering. Enzyme provides a more granular approach to testing React components compared to @vue/test-utils.

react-testing-library

React Testing Library is another testing library for React that focuses on testing components in a way that resembles how users would interact with them, rather than testing implementation details. It is similar to @vue/test-utils in philosophy but tailored for React.

angular-testing-library

Angular Testing Library is a set of helpers for testing Angular components with a focus on the user experience. Like @vue/test-utils, it provides utilities for interacting with components, but it is designed specifically for the Angular framework.

README

vue-test-utils

Currently in beta

To use vue-test-utils beta:

// npm
npm install --save-dev @vue/test-utils

// yarn
yarn add --dev @vue/test-utils

Intro

vue-test-utils is the official test library for Vue.js. It provides methods for unit testing Vue components.

Documentation

Refer to documentation

Examples

• example with Jest
• example with Mocha
• example with tape
• example with AVA

Questions

For questions and support please use the Discord chat room, Gitter chat room, or the official forum. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Contribution

Please make sure to read the Contributing Guide before making a pull request. If you have a Vue-related project/component/tool, add it with a pull-request to this curated list!

Changelog

Details changes for each release are documented in the release notes.

Stay In Touch

For the latest releases and announcements, follow on Twitter: @vuejs

License

MIT