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 18239a7

Browse files
authored
Merge pull request #70 from testing-library/add-emoji
Add emoji 🦎 + small tweaks on readme
2 parents 79ad59e + 85353a8 commit 18239a7

File tree

3 files changed

+90
-45
lines changed

3 files changed

+90
-45
lines changed

‎README.md‎

Lines changed: 86 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,64 @@
11
<div align="center">
22
<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+
<a href="https://www.joypixels.com/emoji/1F98E">
5+
<img
6+
height="80"
7+
width="80"
8+
alt="lizard"
9+
src="https://raw.githubusercontent.com/testing-library/vue-testing-library/master/lizard.png"
10+
/>
11+
</a>
12+
13+
<p>Simple and complete Vue.js testing utilities that encourage good testing practices.</p>
14+
15+
<p>Vue Testing Library is a lightweight adapter built on top of <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> and <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>
516

617
<br />
718

8-
[**Read The Docs**](https://testing-library.com/vue) |
9-
[Edit the docs](https://github.com/testing-library/testing-library-docs)
19+
[**Read the Docs**][docs] | [Edit the docs][docs-edit]
1020

1121
<br />
1222

1323
</div>
1424

1525
<hr />
1626

17-
[![Build Status](https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master)](https://travis-ci.org/testing-library/vue-testing-library)&nbsp;&nbsp;
18-
[![Coverage Status](https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg)](https://codecov.io/github/testing-library/vue-testing-library)&nbsp;&nbsp;
19-
[![GitHub version](https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg)](https://badge.fury.io/gh/testing-library%2Fvue-testing-library)
27+
<!-- prettier-ignore-start -->
28+
[![Build Status][build-badge]][build]
29+
[![Coverage Status][coverage-badge]][coverage]
30+
[![GitHub version][github-badge]][github]
31+
[![npm version][npm-badge]][npm]
2032

21-
[![npm version](https://badge.fury.io/js/%40testing-library%2Fvue.svg)](https://badge.fury.io/js/%40testing-library%2Fvue)&nbsp;&nbsp;
22-
[![license](https://img.shields.io/github/license/testing-library/vue-testing-library.svg)](https://img.shields.io/github/license/testing-library/vue-testing-library)
33+
[![MIT License][license-badge]][license]
34+
[![Join the community on Spectrum][spectrum-badge]][spectrum]
35+
<!-- prettier-ignore-end -->
2336

2437
<h2>Table of Contents</h2>
2538

2639
- [Installation](#installation)
27-
- [Examples](#examples)
40+
- [A simple example](#a-simple-example)
41+
- [More examples](#more-examples)
2842
- [Docs](#docs)
2943
- [License](#license)
3044
- [Contributors](#contributors)
3145

3246
## Installation
3347

34-
This module is distributed via npm which is bundled with node and
35-
should be installed as one of your project's `devDependencies`:
48+
This module is distributed via npm and should be installed as one of your
49+
project's `devDependencies`:
3650

3751
```
3852
npm install --save-dev @testing-library/vue
3953
```
4054

55+
This library has `peerDependencies` listings for `Vue` and
56+
`vue-template-compiler`.
57+
4158
You may also be interested in installing `jest-dom` so you can use
4259
[the custom Jest matchers](https://github.com/gnapse/jest-dom#readme).
4360

44-
## Examples
61+
## A simple example
4562

4663
```html
4764
<!-- TestComponent.vue -->
@@ -53,74 +70,98 @@ You may also be interested in installing `jest-dom` so you can use
5370
</template>
5471

5572
<script>
56-
export default {
57-
data: () => ({
58-
count: 0
59-
}),
60-
methods: {
61-
increment () {
62-
this.count++
73+
export default {
74+
data: () => ({
75+
count: 0
76+
}),
77+
methods: {
78+
increment() {
79+
this.count++
80+
}
6381
}
6482
}
65-
}
6683
</script>
6784
```
6885

6986
```js
7087
// TestComponent.spec.js
71-
import { render, fireEvent, cleanup } from '@testing-library/vue'
88+
import { render, fireEvent } from '@testing-library/vue'
7289
import TestComponent from './TestComponent.vue'
7390

74-
// automatically unmount and cleanup DOM after the test is finished.
75-
afterEach(cleanup)
76-
77-
it('increments value on click', async () => {
91+
test('increments value on click', async () => {
7892
// The render method returns a collection of utilities to query your component.
7993
const { getByText } = render(TestComponent)
8094

8195
// getByText returns the first matching node for the provided text, and
8296
// throws an error if no elements match or if more than one match is found.
8397
getByText('Times clicked: 0')
8498

99+
// `button` is the actual DOM element.
85100
const button = getByText('increment')
86101

87-
// Dispatch a native click event to our button element.
102+
// Dispatch a native click event.
88103
await fireEvent.click(button)
89104
await fireEvent.click(button)
90105

91106
getByText('Times clicked: 2')
92107
})
93108
```
94109

95-
You'll find examples of testing with different libraries in
96-
[the test directory](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__).
110+
### More examples
111+
112+
You'll find examples of testing with different situations and popular libraries
113+
in [the test directory][test-directory].
97114

98115
Some included are:
99116

100-
* [`vuex`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js)
101-
* [`vue-router`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
102-
* [`vee-validate`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
117+
- [`vuex`][vuex-example]
118+
- [`vue-router`][vue-router-example]
119+
- [`vee-validate`][vee-validate-example]
120+
- [`vue-i18n`][vue-i18n-example]
103121

104-
Feel free to contribute with more!
122+
Feel free to contribute with more examples!
105123

106124
## Docs
107125

108-
[**Read The Docs**](https://testing-library.com/vue) |
109-
[Edit the docs](https://github.com/testing-library/testing-library-docs)
126+
[**Read the Docs**][docs] | [Edit the docs][docs-edit]
110127

111128
## License
112129

113-
MIT
130+
[MIT][license]
114131

115132
## Contributors
116133

117-
[![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=200)](https://github.com/dfcook)
118-
[![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=200&v=3)](https://github.com/afontcu)
119-
[![eunjae-lee](https://avatars0.githubusercontent.com/u/499898?v=3&s=200)](https://github.com/eunjae-lee)
120-
[![tim-maguire](https://avatars0.githubusercontent.com/u/29452317?v=3&s=200)](https://github.com/tim-maguire)
121-
[![samdelacruz](https://avatars0.githubusercontent.com/u/2040007?v=3&s=200)](https://github.com/samdelacruz)
122-
[![ankitsinghaniyaz](https://avatars0.githubusercontent.com/u/11331989?v=3&s=200)](https://github.com/ankitsinghaniyaz)
123-
[![lindgr3n](https://avatars0.githubusercontent.com/u/24882614?v=3&s=200)](https://github.com/lindgr3n)
124-
[![kentcdodds](https://avatars0.githubusercontent.com/u/1500684?v=3&s=200)](https://github.com/kentcdodds)
125-
[![brennj](https://avatars2.githubusercontent.com/u/29227924?v=3&s=200)](https://github.com/brennj)
126-
[![makeupsomething](https://avatars2.githubusercontent.com/u/7676733?v=3&s=200)](https://github.com/makeupsomething)
134+
[![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=170)](https://github.com/dfcook)
135+
[![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=170&v=3)](https://github.com/afontcu)
136+
[![eunjae-lee](https://avatars0.githubusercontent.com/u/499898?v=3&s=170)](https://github.com/eunjae-lee)
137+
[![tim-maguire](https://avatars0.githubusercontent.com/u/29452317?v=3&s=170)](https://github.com/tim-maguire)
138+
[![samdelacruz](https://avatars0.githubusercontent.com/u/2040007?v=3&s=170)](https://github.com/samdelacruz)
139+
[![ankitsinghaniyaz](https://avatars0.githubusercontent.com/u/11331989?v=3&s=170)](https://github.com/ankitsinghaniyaz)
140+
[![lindgr3n](https://avatars0.githubusercontent.com/u/24882614?v=3&s=170)](https://github.com/lindgr3n)
141+
[![kentcdodds](https://avatars0.githubusercontent.com/u/1500684?v=3&s=170)](https://github.com/kentcdodds)
142+
[![brennj](https://avatars2.githubusercontent.com/u/29227924?v=3&s=170)](https://github.com/brennj)
143+
[![makeupsomething](https://avatars2.githubusercontent.com/u/7676733?v=3&s=170)](https://github.com/makeupsomething)
144+
145+
<!-- prettier-ignore-start -->
146+
[build-badge]: https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master
147+
[build]: https://travis-ci.org/testing-library/vue-testing-library
148+
[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
149+
[spectrum]: https://spectrum.chat/testing-library
150+
[coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg
151+
[coverage]: https://codecov.io/github/testing-library/vue-testing-library
152+
[github-badge]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg
153+
[github]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library
154+
[npm-badge]: https://badge.fury.io/js/%40testing-library%2Fvue.svg
155+
[npm]: https://badge.fury.io/js/%40testing-library%2Fvue
156+
[license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg
157+
[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
158+
159+
[docs]: https://testing-library.com/vue
160+
[docs-edit]: https://github.com/testing-library/testing-library-docs
161+
162+
[test-directory]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__
163+
[vuex-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js
164+
[vue-router-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js
165+
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js
166+
[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/tests/__tests__/vueI18n.js
167+
<!-- prettier-ignore-end -->

‎lizard.png‎

39.1 KB
Loading[フレーム]

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@
8282
"*.{js,vue}": [
8383
"eslint --fix",
8484
"git add"
85+
],
86+
"*.{md,html}": [
87+
"prettier --write",
88+
"git add"
8589
]
8690
}
8791
}

0 commit comments

Comments
(0)

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