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 af30961

Browse files
afontcunickserv
andauthored
docs: Add link to new Discord (testing-library#148)
* Add links to issues and discord * Improve example to use screen * Remove comment * Fix links * Fix jest-dom link * filling -> filing * Add discord badge * Swap spectrum with discord * Update .github/ISSUE_TEMPLATE/bug_report.md Co-authored-by: Nick McCurdy <nick@nickmccurdy.com> Co-authored-by: Nick McCurdy <nick@nickmccurdy.com>
1 parent 4c5f724 commit af30961

File tree

2 files changed

+89
-22
lines changed

2 files changed

+89
-22
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ assignees: ''
99
<!-- Thanks for your interest in the project. We appreciate bugs filed and PRs submitted! -->
1010

1111
<!--
12-
- For questions related to using the library, please visit a support community
13-
instead of filing an issue on GitHub: https://spectrum.chat/testing-library
12+
- For questions related to using the library, please join the Discord server (https://testing-library.com/discord) instead of filing an issue on GitHub.
1413
1514
- Please fill out this template with all the relevant information so we can
1615
understand what's going on and fix the issue.

‎README.md‎

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
[![Coverage Status][coverage-badge]][coverage]
3232
[![GitHub version][github-badge]][github]
3333
[![npm version][npm-badge]][npm]
34+
[![Discord][discord-badge]][discord]
3435

3536
[![MIT License][license-badge]][license]
36-
[![Join the community on Spectrum][spectrum-badge]][spectrum]
3737
<!-- prettier-ignore-end -->
3838

3939
<h2>Table of Contents</h2>
@@ -42,11 +42,16 @@
4242
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
4343

4444
- [Installation](#installation)
45-
- [A simple example](#a-simple-example)
45+
- [A basic example](#a-basic-example)
4646
- [More examples](#more-examples)
47+
- [Guiding Principles](#guiding-principles)
4748
- [Docs](#docs)
4849
- [Typings](#typings)
4950
- [ESLint support](#eslint-support)
51+
- [Issues](#issues)
52+
- [🐛 Bugs](#-bugs)
53+
- [💡 Feature Requests](#-feature-requests)
54+
- [❓ Questions](#-questions)
5055
- [License](#license)
5156
- [Contributors](#contributors)
5257

@@ -64,13 +69,12 @@ npm install --save-dev @testing-library/vue
6469
This library has `peerDependencies` listings for `Vue` and
6570
`vue-template-compiler`.
6671

67-
You may also be interested in installing `jest-dom` so you can use
68-
[the custom Jest matchers](https://github.com/testing-library/jest-dom#readme).
72+
You may also be interested in installing `jest-dom` so you can use[the custom
73+
Jest matchers][jest-dom].
6974

70-
## A simple example
75+
## A basic example
7176

7277
```html
73-
<!-- TestComponent.vue -->
7478
<template>
7579
<div>
7680
<p>Times clicked: {{ count }}</p>
@@ -80,6 +84,7 @@ You may also be interested in installing `jest-dom` so you can use
8084

8185
<script>
8286
export default {
87+
name: 'Button',
8388
data: () => ({
8489
count: 0,
8590
}),
@@ -93,29 +98,40 @@ You may also be interested in installing `jest-dom` so you can use
9398
```
9499

95100
```js
96-
// TestComponent.spec.js
97-
import {render, fireEvent} from '@testing-library/vue'
98-
import TestComponent from './TestComponent.vue'
101+
import {render, screen, fireEvent} from '@testing-library/vue'
102+
import Button from './Button'
99103

100104
test('increments value on click', async () => {
101-
// The render method returns a collection of utilities to query the component.
102-
const {getByText} = render(TestComponent)
105+
// The `render` method renders the component into the document.
106+
// It also binds to `screen` all the available queries to interact with
107+
// the component.
108+
render(Button)
103109

104-
// getByText returns the first matching node for the provided text, and
105-
// throws an error if no elements match or if more than one match is found.
106-
getByText('Times clicked: 0')
110+
// queryByText returns the first matching node for the provided text
111+
// or returns null.
112+
expect(screen.queryByText('Times clicked: 0')).toBeTruthy()
107113

108-
// `button` is the actual DOM element.
109-
const button = getByText('increment')
114+
// getByText returns the first matching node for the provided text
115+
// or throws an error.
116+
const button = screen.getByText('increment')
110117

111-
// Dispatch a couple of native click events.
118+
// Click a couple of times.
112119
await fireEvent.click(button)
113120
await fireEvent.click(button)
114121

115-
getByText('Times clicked: 2')
122+
expect(screen.queryByText('Times clicked: 2')).toBeTruthy()
116123
})
117124
```
118125

126+
> You might want to install [`jest-dom`][jest-dom] to add handy assertions such
127+
> as `.toBeInTheDocument()`. In the example above, you could write
128+
> `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
129+
130+
> Using `byText` queries it's not the only nor the best way to query for
131+
> elements. Read [Which query should I use?][which-query] to discover
132+
> alternatives. In the example above, `getByRole('button', {name: 'increment'})`
133+
> is possibly the best option to get the button element.
134+
119135
### More examples
120136

121137
You'll find examples of testing with different situations and popular libraries
@@ -131,6 +147,27 @@ Some included are:
131147

132148
Feel free to contribute with more examples!
133149

150+
## Guiding Principles
151+
152+
> [The more your tests resemble the way your software is used, the more
153+
> confidence they can give you.][guiding-principle]
154+
155+
We try to only expose methods and utilities that encourage you to write tests
156+
that closely resemble how your Vue components are used.
157+
158+
Utilities are included in this project based on the following guiding
159+
principles:
160+
161+
1. If it relates to rendering components, it deals with DOM nodes rather than
162+
component instances, nor should it encourage dealing with component
163+
instances.
164+
2. It should be generally useful for testing individual Vue components or full
165+
Vue applications.
166+
3. Utility implementations and APIs should be simple and flexible.
167+
168+
At the end of the day, what we want is for this library to be pretty
169+
light-weight, simple, and understandable.
170+
134171
## Docs
135172

136173
[**Read the docs**][docs] | [Edit the docs][docs-edit]
@@ -145,6 +182,30 @@ bundled with Vue Testing Library.
145182
If you want to lint test files that use Vue Testing Library, you can use the
146183
official plugin: [eslint-plugin-testing-library][eslint-plugin-testing-library].
147184

185+
## Issues
186+
187+
_Looking to contribute? Look for the [Good First Issue][good-first-issue]
188+
label._
189+
190+
### 🐛 Bugs
191+
192+
Please [file an issue][add-issue-bug] for bugs, missing documentation, or
193+
unexpected behavior.
194+
195+
[**See Bugs**][bugs]
196+
197+
### 💡 Feature Requests
198+
199+
Please [file an issue][add-issue] to suggest new features. Vote on feature
200+
requests by adding a 👍. This helps maintainers prioritize what to work on.
201+
202+
### ❓ Questions
203+
204+
For questions related to using the library, please visit a support community
205+
instead of filing an issue on GitHub.
206+
207+
- [Discord][discord]
208+
148209
## License
149210

150211
[MIT][license]
@@ -178,8 +239,6 @@ official plugin: [eslint-plugin-testing-library][eslint-plugin-testing-library].
178239
<!-- prettier-ignore-start -->
179240
[build-badge]: https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master
180241
[build]: https://travis-ci.org/testing-library/vue-testing-library
181-
[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
182-
[spectrum]: https://spectrum.chat/testing-library
183242
[coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg
184243
[coverage]: https://codecov.io/github/testing-library/vue-testing-library
185244
[github-badge]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg
@@ -188,12 +247,21 @@ official plugin: [eslint-plugin-testing-library][eslint-plugin-testing-library].
188247
[npm]: https://badge.fury.io/js/%40testing-library%2Fvue
189248
[license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg
190249
[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
250+
[discord]: https://testing-library.com/discord
251+
[discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
191252
[types]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__vue
253+
[jest-dom]: https://github.com/testing-library/jest-dom
254+
[which-query]: https://testing-library.com/docs/guide-which-query
255+
[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
192256

193257
[docs]: https://testing-library.com/vue
194258
[docs-edit]: https://github.com/testing-library/testing-library-docs
195259
[eslint-plugin-testing-library]: https://github.com/testing-library/eslint-plugin-testing-library
196260

261+
[bugs]: https://github.com/testing-library/vue-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
262+
[add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
263+
[add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)
264+
197265
[test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
198266
[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
199267
[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js

0 commit comments

Comments
(0)

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