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.
<template>
<div>
<p>Times clicked: {{ count }}</p>
<button @click="increment">increment</button>
</div>
</template>
<script>
export default {
name: 'Button',
data: () => ({
count: 0,
}),
methods: {
increment() {
this.count++
},
},
}
</script>import {screen, render, userEvent} from '@testing-library/vue'
import Button from './Button'
test('increments value on click', async () => {
// The render method renders the provided component into the document
render(Button)
// queryByText returns the first matching node for the provided text
// or returns null.
expect(screen.queryByText('Times clicked: 0')).toBeTruthy()
// getByText returns the first matching node for the provided text
// or throws an error.
const button = screen.getByText('increment')
// Click a couple of times.
await userEvent.click(button)
await userEvent.click(button)
expect(screen.queryByText('Times clicked: 2')).toBeTruthy()
})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.
If you want to lint test files that use Vue Testing Library, you can use the official plugin: eslint-plugin-testing-library.
