Testing Library
Learn how to write the tests in Vue frameworks using Vue Testing Library.
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 ...