Skip to content

Remove duplication from README and official docs #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 1, 2019
Merged

Remove duplication from README and official docs #35

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 61 additions & 98 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
<div align="center">
<h1>vue-testing-library</h1>
<h1>Vue Testing Library</h1>

<p>Lightweight adapter allowing <a href="https://github.com/testing-library/dom-testing-library/">dom-testing-library</a> to be used to test <a href="https://github.com/vuejs/vue">Vue.js</a> components built on top of <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a></p>
<p>Lightweight adapter allowing <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> to be used to test <a href="https://github.com/vuejs/vue">Vue.js</a> components. Built on top of <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>

<br />

[**Read The Docs**](https://testing-library.com/vue) |
[Edit the docs](https://github.com/testing-library/testing-library-docs)

<br />

</div>

Expand All @@ -14,129 +21,80 @@
[![npm version](https://badge.fury.io/js/vue-testing-library.svg)](https://badge.fury.io/js/vue-testing-library)&nbsp;&nbsp;
[![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`
<h2>Table of Contents</h2>

* [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$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/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.vue -->
<template>
<div>
<span data-testid="test1">Hello World</span>
<p>Times clicked: {{ count }}</p>
<button @click="increment">increment</button>
</div>
</template>

// 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')
})
<script>
export default {
data: () => ({
count: 0
}),
methods: {
increment () {
this.count++
}
}
}
</script>
```

### 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)
Expand All @@ -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)
Expand Down