Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit afd75a8

Browse files
authored
Merge pull request #35 from testing-library/afontcu-patch-1
Remove duplication from README and official docs
2 parents e308b78 + 8a04390 commit afd75a8

File tree

1 file changed

+61
-98
lines changed

1 file changed

+61
-98
lines changed

‎README.md‎

Lines changed: 61 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<div align="center">
2-
<h1>vue-testing-library</h1>
2+
<h1>Vue Testing Library</h1>
33

4-
<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>
4+
<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>
5+
6+
<br />
7+
8+
[**Read The Docs**](https://testing-library.com/vue) |
9+
[Edit the docs](https://github.com/testing-library/testing-library-docs)
10+
11+
<br />
512

613
</div>
714

@@ -14,129 +21,80 @@
1421
[![npm version](https://badge.fury.io/js/vue-testing-library.svg)](https://badge.fury.io/js/vue-testing-library)&nbsp;&nbsp;
1522
[![license](https://img.shields.io/github/license/testing-library/vue-testing-library.svg)](https://img.shields.io/github/license/testing-library/vue-testing-library)
1623

17-
## This library
18-
19-
The `vue-testing-library` is an adapter that enables Vue testing using the framework-agnostic DOM testing library `dom-testing-library`
24+
<h2>Table of Contents</h2>
2025

21-
* [Installation](#installation)
22-
* [Usage](#usage)
23-
* [`render`](#render)
24-
* [`fireEvent`](#fireEvent)
25-
* [`wait`](#wait)
26-
* [Examples](#examples)
27-
* [LICENSE](#license)
26+
- [Installation](#installation)
27+
- [Examples](#examples)
28+
- [Docs](#docs)
29+
- [License](#license)
30+
- [Contributors](#contributors)
2831

2932
## Installation
3033

3134
This module is distributed via npm which is bundled with node and
3235
should be installed as one of your project's `devDependencies`:
3336

34-
```
35-
npm install --save-dev vue-testing-library
36-
```
37-
38-
## Usage
39-
4037
```
4138
npm install --save-dev @testing-library/vue
42-
jest
43-
vue-jest
44-
babel-jest
45-
babel-preset-env
46-
babel-plugin-transform-runtime
4739
```
4840

49-
```javascript
50-
// package.json
51-
"scripts": {
52-
"test": "jest"
53-
}
54-
55-
"jest": {
56-
"moduleDirectories": [
57-
"node_modules",
58-
"src"
59-
],
60-
"moduleFileExtensions": [
61-
"js",
62-
"vue"
63-
],
64-
"testPathIgnorePatterns": [
65-
"/node_modules/"
66-
],
67-
"transform": {
68-
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
69-
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
70-
}
71-
}
41+
You may also be interested in installing `jest-dom` so you can use
42+
[the custom Jest matchers](https://github.com/gnapse/jest-dom#readme).
7243

73-
// .babelrc
74-
{
75-
"presets": [
76-
["env", {
77-
"modules": false,
78-
"targets": {
79-
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
80-
}
81-
}]
82-
],
83-
"plugins": [
84-
"transform-runtime"
85-
],
86-
"env": {
87-
"test": {
88-
"presets": ["env"]
89-
}
90-
}
91-
}
44+
## Examples
9245

93-
// src/TestComponent.vue
46+
```html
47+
<!-- src/TestComponent.vue -->
9448
<template>
9549
<div>
96-
<span data-testid="test1">Hello World</span>
50+
<p>Times clicked: {{ count }}</p>
51+
<button @click="increment">increment</button>
9752
</div>
9853
</template>
9954

100-
// src/TestComponent.spec.js
101-
import 'jest-dom/extend-expect'
102-
import { render } from '@testing-library/vue'
103-
import TestComponent from './TestComponent'
104-
105-
test('should render HelloWorld', () => {
106-
const { queryByTestId } = render(TestComponent)
107-
expect(queryByTestId('test1')).toHaveTextContent('Hello World')
108-
})
55+
<script>
56+
export default {
57+
data: () => ({
58+
count: 0
59+
}),
60+
methods: {
61+
increment () {
62+
this.count++
63+
}
64+
}
65+
}
66+
</script>
10967
```
11068

111-
### render
112-
113-
The `render` function takes up to 3 parameters and returns an object with some helper methods.
114-
115-
1. Component - the Vue component to be tested.
116-
2. RenderOptions - an object containing additional information to be passed to @vue/test-utils mount. This can be:
117-
* store - The object definition of a Vuex store. If present, `render` will configure a Vuex store and pass to mount.
118-
* routes - A set of routes. If present, render will configure VueRouter and pass to mount.
119-
All additional render options are passed to the vue-test-utils mount function in its options.
120-
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.
69+
```js
70+
// src/TestComponent.spec.js
71+
import { render, fireEvent, cleanup } from '@testing-library/vue'
72+
import TestComponent from './components/TestComponent.vue'
12173

122-
### fireEvent
74+
// automatically unmount and cleanup DOM after the test is finished.
75+
afterEach(cleanup)
12376

124-
Lightweight wrapper around DOM element events and methods. Will call `wait`, so can be awaited to allow effects to propagate.
77+
it('increments value on click', async () => {
78+
// The render method returns a collection of utilities to query your component.
79+
const { getByText } = render(TestComponent)
12580

126-
### wait
81+
// getByText returns the first matching node for the provided text, and
82+
// throws an error if no elements match or if more than one match is found.
83+
getByText('Times clicked: 0')
12784

128-
When in need to wait for non-deterministic periods of time you can use `wait`,
129-
to wait for your expectations to pass. The `wait` function is a small wrapper
130-
around the
131-
[`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) module.
85+
const button = getByText('increment')
13286

133-
Waiting can be very important in Vue components, @vue/test-utils has succeeded in making the majority of updates happen
134-
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)
87+
// Dispatch a native click event to our button element.
88+
await fireEvent.click(button)
89+
await fireEvent.click(button)
13590

136-
## Examples
91+
getByText('Times clicked: 2')
92+
})
93+
```
13794

13895
You'll find examples of testing with different libraries in
13996
[the test directory](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__).
97+
14098
Some included are:
14199

142100
* [`vuex`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js)
@@ -145,11 +103,16 @@ Some included are:
145103

146104
Feel free to contribute with more!
147105

148-
## LICENSE
106+
## Docs
107+
108+
[**Read The Docs**](https://testing-library.com/vue) |
109+
[Edit the docs](https://github.com/testing-library/testing-library-docs)
110+
111+
## License
149112

150113
MIT
151114

152-
## CONTRIBUTORS
115+
## Contributors
153116

154117
[![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=200)](https://github.com/dfcook)
155118
[![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=200&v=3)](https://github.com/afontcu)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /