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.
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.
<!-- 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 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') // `button` is the actual DOM element. const button = getByText('increment') // Dispatch a native click event. await fireEvent.click(button) await fireEvent.click(button) getByText('Times clicked: 2') })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!
