From 8a04390809ed2ce143046b0da4c2260cbc343450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Sat, 1 Jun 2019 19:32:54 +0200 Subject: [PATCH] Update README.md --- README.md | 159 +++++++++++++++++++++--------------------------------- 1 file changed, 61 insertions(+), 98 deletions(-) diff --git a/README.md b/README.md index 4af670af..ec529dd6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,14 @@
-

vue-testing-library

+

Vue Testing Library

-

Lightweight adapter allowing dom-testing-library to be used to test Vue.js components built on top of @vue/test-utils

+

Lightweight adapter allowing DOM Testing Library to be used to test Vue.js components. Built on top of @vue/test-utils.

+ +
+ +[**Read The Docs**](https://testing-library.com/vue) | +[Edit the docs](https://github.com/testing-library/testing-library-docs) + +
@@ -14,129 +21,80 @@ [![npm version](https://badge.fury.io/js/vue-testing-library.svg)](https://badge.fury.io/js/vue-testing-library)   [![license](https://img.shields.io/github/license/testing-library/vue-testing-library.svg)](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 + -// 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 [![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=200)](https://github.com/dfcook) [![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=200&v=3)](https://github.com/afontcu)