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:
- Re-exports query utilities and helpers from
DOM Testing Library.
@vue/test-utilsmethods that are in conflict with Testing Library Guiding Principle.
- Tweaks some methods from both sources.
If using Vue2
npm install --save-dev @testing-library/vue@5
yarn add --dev @testing-library/vue@5
If using Vue3
npm install --save-dev @testing-library/vue
yarn add --dev @testing-library/vue
You can now use all of
DOM Testing Library's
queryAllBy commands. See here the
full list of queries.
You may also be interested in installing
@testing-library/jest-dom so you can
the custom Jest matchers
for the DOM.
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.
Vue Testing Library is a very light-weight solution for testing Vue
components. It provides light utility functions on top of
a way that encourages better testing practices.
Its primary guiding principle is:
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.