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.

Read the docs | Edit the docs

---

Table of Contents

• Installation
• A simple example
  • More examples
• Docs
• Typings
• ESLint
• License
• Contributors

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')
})

More examples

You'll find examples of testing with different situations and popular libraries in the test directory.

Some included are:

• vuex
• vue-router
• vee-validate
• vue-i18n
• vuetify

Feel free to contribute with more examples!

Docs

Read the docs | Edit the docs

Typings

The TypeScript type definitions are in the DefinitelyTyped repo and bundled with Vue Testing Library.

ESLint support

If you want to lint test files that use Vue Testing Library, you can use the official plugin: eslint-plugin-testing-library.

License

MIT

Contributors