+
+
+
+[**Read The Docs**](https://testing-library.com/vue) |
+[Edit the docs](https://github.com/testing-library/testing-library-docs)
+
+
@@ -14,129 +21,80 @@
[](https://badge.fury.io/js/vue-testing-library)
[](https://img.shields.io/github/license/testing-library/vue-testing-library)
-## This library
-
-The `vue-testing-library` is an adapter that enables Vue testing using the framework-agnostic DOM testing library `dom-testing-library`
+
Table of Contents
-* [Installation](#installation)
-* [Usage](#usage)
- * [`render`](#render)
- * [`fireEvent`](#fireEvent)
- * [`wait`](#wait)
-* [Examples](#examples)
-* [LICENSE](#license)
+- [Installation](#installation)
+- [Examples](#examples)
+- [Docs](#docs)
+- [License](#license)
+- [Contributors](#contributors)
## 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 vue-testing-library
-```
-
-## Usage
-
```
npm install --save-dev @testing-library/vue
- jest
- vue-jest
- babel-jest
- babel-preset-env
- babel-plugin-transform-runtime
```
-```javascript
-// package.json
- "scripts": {
- "test": "jest"
- }
-
- "jest": {
- "moduleDirectories": [
- "node_modules",
- "src"
- ],
- "moduleFileExtensions": [
- "js",
- "vue"
- ],
- "testPathIgnorePatterns": [
- "/node_modules/"
- ],
- "transform": {
- "^.+\\.js$": "/node_modules/babel-jest",
- ".*\\.(vue)$": "/node_modules/vue-jest"
- }
- }
+You may also be interested in installing `jest-dom` so you can use
+[the custom Jest matchers](https://github.com/gnapse/jest-dom#readme).
-// .babelrc
-{
- "presets": [
- ["env", {
- "modules": false,
- "targets": {
- "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
- }
- }]
- ],
- "plugins": [
- "transform-runtime"
- ],
- "env": {
- "test": {
- "presets": ["env"]
- }
- }
-}
+## Examples
-// src/TestComponent.vue
+```html
+
- Hello World
+
Times clicked: {{ count }}
+
-// src/TestComponent.spec.js
-import 'jest-dom/extend-expect'
-import { render } from '@testing-library/vue'
-import TestComponent from './TestComponent'
-
-test('should render HelloWorld', () => {
- const { queryByTestId } = render(TestComponent)
- expect(queryByTestId('test1')).toHaveTextContent('Hello World')
-})
+
```
-### render
-
-The `render` function takes up to 3 parameters and returns an object with some helper methods.
-
-1. Component - the Vue component to be tested.
-2. RenderOptions - an object containing additional information to be passed to @vue/test-utils mount. This can be:
-* store - The object definition of a Vuex store. If present, `render` will configure a Vuex store and pass to mount.
-* routes - A set of routes. If present, render will configure VueRouter and pass to mount.
-All additional render options are passed to the vue-test-utils mount function in its options.
-3. configurationCb - A callback to be called passing the Vue instance when created, plus the store and router if specified. This allows 3rd party plugins to be installed prior to mount.
+```js
+// src/TestComponent.spec.js
+import { render, fireEvent, cleanup } from '@testing-library/vue'
+import TestComponent from './components/TestComponent.vue'
-### fireEvent
+// automatically unmount and cleanup DOM after the test is finished.
+afterEach(cleanup)
-Lightweight wrapper around DOM element events and methods. Will call `wait`, so can be awaited to allow effects to propagate.
+it('increments value on click', async () => {
+ // The render method returns a collection of utilities to query your component.
+ const { getByText } = render(TestComponent)
-### wait
+ // 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')
-When in need to wait for non-deterministic periods of time you can use `wait`,
-to wait for your expectations to pass. The `wait` function is a small wrapper
-around the
-[`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) module.
+ const button = getByText('increment')
-Waiting can be very important in Vue components, @vue/test-utils has succeeded in making the majority of updates happen
-synchronously however there are occasions when `wait` will allow the DOM to update. For example, see [`here`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/end-to-end.js)
+ // Dispatch a native click event to our button element.
+ await fireEvent.click(button)
+ await fireEvent.click(button)
-## Examples
+ getByText('Times clicked: 2')
+})
+```
You'll find examples of testing with different libraries in
[the test directory](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__).
+
Some included are:
* [`vuex`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js)
@@ -145,11 +103,16 @@ Some included are:
Feel free to contribute with more!
-## LICENSE
+## Docs
+
+[**Read The Docs**](https://testing-library.com/vue) |
+[Edit the docs](https://github.com/testing-library/testing-library-docs)
+
+## License
MIT
-## CONTRIBUTORS
+## Contributors
[](https://github.com/dfcook)
[](https://github.com/afontcu)