Lightweight adapter allowing DOM Testing Library to be used to test Vue.js components. Built on top of @vue/test-utils.
Build Status Coverage Status GitHub version
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.
<!-- 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') })
You'll find examples of testing with different libraries in the test directory.
Some included are:
Feel free to contribute with more!
MIT
dfcook afontcu eunjae-lee tim-maguire samdelacruz ankitsinghaniyaz lindgr3n kentcdodds