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:
- Re-exports query utilities and helpers from
DOM Testing Library
. - Hides
@vue/test-utils
methods that are in conflict with Testing Library Guiding Principle. - Tweaks some methods from both sources.
Quickstart
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 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.