Skip to content

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

License

Notifications You must be signed in to change notification settings

arnaublanche/vue-testing-library

 
 

Repository files navigation

Vue Testing Library


lizard

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



Build Status Coverage Status GitHub version npm version

MIT License Join the community on Spectrum

Table of Contents

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:

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.

License

MIT

Contributors

dfcook afontcu eunjae-lee tim-maguire samdelacruz ankitsinghaniyaz lindgr3n kentcdodds brennj makeupsomething mb200 Oluwasetemi cimbul alexkrolick edufarre

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 78.9%
  • Vue 21.1%