Skip to main content

Intro

Vue Testing Library builds on top of DOM Testing Library by adding APIs for working with Vue components. It is built on top of @vue/test-utils, the official testing library for Vue.

In short, Vue Testing Library does three things:

  1. Re-exports query utilities and helpers from DOM Testing Library.
  2. Hides @vue/test-utils methods that are in conflict with Testing Library Guiding Principle.
  3. Tweaks some methods from both sources.

Quickstart​

If using Vue2

npm install --save-dev @testing-library/vue@5

If using Vue3

npm install --save-dev @testing-library/vue

You can now use all of DOM Testing Library's getBy, getAllBy, queryBy and queryAllBy commands. See here the full list of queries.

You may also be interested in installing @testing-library/jest-dom so you can use the custom Jest matchers for the DOM.

The problem​

You want to write maintainable tests for your Vue components. As a part of this goal, you want your tests to avoid including implementation details of your components. You'd rather focus on making your tests give you the confidence for which they are intended.

This solution​

Vue Testing Library is a very light-weight solution for testing Vue components. It provides light utility functions on top of @vue/test-utils, in a way that encourages better testing practices.

Its primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

So rather than dealing with instances of rendered Vue components, your tests will work with actual DOM nodes.

The utilities this library provides facilitate querying the DOM in the same way the user would. They allow you to find elements by their label text, finding links and buttons from their text, and assert that your application is accessible.

It also exposes a recommended way to find elements by a data-testid as an "escape hatch" for elements where the text content and label do not make sense or is not practical.