Vue Testing Library

Lightweight adapter allowing DOM Testing Library to be used to test Vue.js components. Built on top of @vue/test-utils.

Installation
Examples
Docs
License
Contributors

Installation

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

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

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

Examples

<!-- 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, cleanup } from '@testing-library/vue'
import TestComponent from './TestComponent.vue'

// automatically unmount and cleanup DOM after the test is finished.
afterEach(cleanup)

it('increments value on click', async () => {
  // The render method returns a collection of utilities to query your 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')

  const button = getByText('increment')

  // Dispatch a native click event to our button element.
  await fireEvent.click(button)
  await fireEvent.click(button)

  getByText('Times clicked: 2')
})