Vue Testing Library

Simple and complete Vue.js testing utilities that encourage good testing practices.

Vue Testing Library is a lightweight adapter built on top of DOM Testing Library and @vue/test-utils.

Installation

This module is distributed via npm and should be installed as one of your project's devDependencies:

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

This library has peerDependencies listings for Vue and vue-template-compiler.

You may also be interested in installing jest-dom so you can use the custom Jest matchers.

A simple example

<!-- TestComponent.vue -->
<template>
  <div>
    <p>Times clicked: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
  export default {
    data: () => ({
      count: 0,
    }),
    methods: {
      increment() {
        this.count++
      },
    },
  }
</script>

// TestComponent.spec.js
import {render, fireEvent} from '@testing-library/vue'
import TestComponent from './TestComponent.vue'

test('increments value on click', async () => {
  // The render method returns a collection of utilities to query the component.
  const {getByText} = render(TestComponent)

  // getByText returns the first matching node for the provided text, and
  // throws an error if no elements match or if more than one match is found.
  getByText('Times clicked: 0')

  // `button` is the actual DOM element.
  const button = getByText('increment')

  // Dispatch a couple of native click events.
  await fireEvent.click(button)
  await fireEvent.click(button)

  getByText('Times clicked: 2')
})