@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

Component testing utils for Vue 3.

Languages

🇫🇷 French version of this README.md

Installation and Usage

• yarn: yarn add @vue/test-utils --dev
• npm: npm install @vue/test-utils --save-dev

Get started with the documentation.

Coming from Vue 2 + Test Utils v1?

Check the migration guide. It's still a work in progress. If you find a problem or something that doesn't work that previously did in Vue Test Utils v1, please open an issue.

Documentation

See the docs.

Development

Get started by running pnpm install. You can run the tests with pnpm test. That's it!

Contributing Docs

All the documentation files can be found in packages/docs. It contains the English markdown files while translation(s) are stored in their corresponding <lang> sub-folder(s):

• fr: French translation.

Besides that, the .vitepress sub-folder contains the config and theme, including the i18n information.

• pnpm docs:dev: Start the docs dev server.
• pnpm docs:build: Build the docs.

To add or maintain the translations, we follow the Vue Ecosystem Translation Guidelines.

• pnpm docs:translation:status [<lang>]: Show the translation status for your language. If you don't specify a language, it will show the status for all languages.
• pnpm docs:translation:compare <lang>: Compare the docs with the latest checkpoint for your language.
• pnpm docs:translation:update <lang> [<commit>]: Update the checkpoint for your language. The checkpoint will be set by the latest commit hash. However, you can also specify a commit hash manually.