@prepair/vue-testing-library
v1.1.6
Published
Simple and complete Vue DOM testing utilities that encourage good testing practices.
Downloads
19
Readme
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
<!-- 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!
Docs
License
MIT