Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Testing Library

Explore how to implement testing best practices in Vue applications using Vue Testing Library. Gain hands-on experience with setup, writing declarative tests by interacting with the DOM like users do, and configuring Jest for efficient testing. This lesson helps you write clearer, maintainable tests that improve application quality.

We'll cover the following...

So far, we’ve used Jest in combination with Vue Test Utils. However, there is another library for writing tests. Testing Library, as mentioned before, is a suite of testing utilities that encourage good testing practices. It offers libraries for many different frameworks, and Vue is one of them.

Testing Library encourages dealing with DOM nodes rather than component instances and writing tests in a manner that imitates the user’s behavior.

Installation

Besides adding Vue Testing Library, it’s also a good idea to include @testing- library/jest-dom in our project. This library provides a set of custom jest matchers that help make tests more declarative, clear, and easier to maintain. We can install both by running one of the commands below:

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

or

yarn add --dev @testing-library/vue @testing-library/jest-dom

After installation, the custom matchers from the @testing-library/jest-dom can be included by importing the library in our test files: import '@testing-library/jest-dom'. Nevertheless, it would be a bit tedious to import this into every single test file, especially if we have hundreds of tests. Fortunately, we can configure a jest setup file to load for ...