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 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')
})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!
The TypeScript type definitions are in the DefinitelyTyped repo and bundled with Vue Testing Library.