Skip to content
Lightweight adapter allowing dom-testing-library to be used to test Vue.js components built on top of @vue/test-utils
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Use default(y) prettier values Jun 9, 2019
tests Use default(y) prettier values Jun 9, 2019
.babelrc Update to latest dom-testing-library Nov 25, 2018
.eslintignore Update .eslintignore Jun 2, 2019
.eslintrc.js
.gitignore #27 - Provide cleanup-after-each Jun 1, 2019
.prettierignore Add Prettier config Jun 5, 2019
.prettierrc.js Use default(y) prettier values Jun 9, 2019
.travis.yml Use yarn in travis Dec 12, 2018
LICENSE Update license and readme to attribute code to react-testing-library Apr 6, 2018
README.md Update README.md Jun 1, 2019
cleanup-after-each.js Fix path for cleanup Jun 1, 2019
jest.config.js Use default(y) prettier values Jun 9, 2019
package-lock.json Install lint-staged Jun 9, 2019
package.json Install lint-staged Jun 9, 2019

README.md

Vue Testing Library

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


Read The Docs | Edit the docs



Build Status   Coverage Status   GitHub version

npm version   license

Table of Contents

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

<!-- src/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>
// src/TestComponent.spec.js
import { render, fireEvent, cleanup } from '@testing-library/vue'
import TestComponent from './components/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')
})

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

Some included are:

Feel free to contribute with more!

Docs

Read The Docs | Edit the docs

License

MIT

Contributors

dfcook afontcu eunjae-lee tim-maguire samdelacruz ankitsinghaniyaz lindgr3n kentcdodds

You can’t perform that action at this time.