Unlock the Power of Testing: A Guide to Vue Components with Vue Testing Library

Why Testing Matters

When it comes to building applications, testing is crucial. Skipping this vital step can lead to false confidence and ultimately, a faulty app. That’s why we’re excited to share with you how to test Vue components using Vue Testing Library.

What is Vue Testing Library?

Vue Testing Library is part of the Testing Library family, which includes React Testing Library, DOM Testing Library, and more. It builds upon Vue Test Utils, the official testing library for Vue, and DOM Testing Library, enabling it to utilize features from the Testing Library family.

Getting Started

To follow along with this tutorial, you’ll need:

• Node > 8.0.0 and npm > 6 installed on your machine
• Vue CLI > 4 installed on your machine
• A basic understanding of Vue
• A basic understanding of testing using Jest

Setup

Create a new Vue project using the Vue CLI and install Jest and Vue Testing Library. You’ll also need to configure Jest to transform `.js` files using Babel and load `.vue` files using `vue-jest`.

npm install --save-dev jest vue-testing-library

Testing Simple Components

When a user loads a page, they expect to see the component render. Let’s test that! Consider this simple Counter component, which provides two buttons for counting and shows the number of counts. We can use the `getByText` helper to check that the component renders correctly.

import { render } from '@testing-library/vue';
import Counter from './Counter.vue';

test('renders counter', () => {
  const { getByText } = render(Counter);
  expect(getByText('Count: 0')).toBeInTheDocument();
});

Testing Form Elements

Now, let’s test a component that stores user input using the V-model. We’ll think like the user and assert that the output is displayed in the output div. We can use the `getByLabelText` method to get the input field associated with a specific label.

import { render } from '@testing-library/vue';
import Form from './Form.vue';

test('renders form', () => {
  const { getByLabelText } = render(Form);
  const input = getByLabelText('Name');
  expect(input).toBeInTheDocument();
});

Testing Complex Components

You’ll encounter components that depend on external data, either through props or by fetching data via an AJAX request. Let’s test an input component that’s used throughout the app. We can pass props and other items, such as slots, to the component being rendered via a second argument to the `render` method.

import { render } from '@testing-library/vue';
import Input from './Input.vue';

test('renders input', () => {
  const props = { value: 'Hello' };
  const { getByText } = render(Input, props);
  expect(getByText('Hello')).toBeInTheDocument();
});

Debugging Tests

Occasionally, tests will fail, and it’s essential to get a clear view of what went wrong. Vue Testing Library makes it easy to debug tests and view the state of the DOM at different points in time.

Experience Your Vue Apps Like a User

Debugging Vue.js applications can be challenging, especially when there are dozens, if not hundreds, of mutations during a user session.