Skip to content

Commit dcf41db

Browse files
committed
docs: reorganize query docs
- give queries a top-level nav entry instead of nesting under DOM Testing Library - give each query its own page - reorganize pages like "Which Query" under the new heading - update internal links and redirects
1 parent 1055c11 commit dcf41db

34 files changed

+8286
-1325
lines changed

docs/contributing.mdx

-29
Original file line numberDiff line numberDiff line change
@@ -40,35 +40,6 @@ Links:
4040

4141
<!-- prettier-ignore-start -->
4242

43-
[npm]: https://www.npmjs.com/
44-
[node]: https://nodejs.org
45-
[build-badge]: https://img.shields.io/travis/kentcdodds/react-testing-library.svg?style=flat-square
46-
[build]: https://travis-ci.org/kentcdodds/react-testing-library
47-
[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/react-testing-library.svg?style=flat-square
48-
[coverage]: https://codecov.io/github/kentcdodds/react-testing-library
49-
[version-badge]: https://img.shields.io/npm/v/react-testing-library.svg?style=flat-square
50-
[package]: https://www.npmjs.com/package/react-testing-library
51-
[downloads-badge]: https://img.shields.io/npm/dm/react-testing-library.svg?style=flat-square
52-
[npmtrends]: http://www.npmtrends.com/react-testing-library
53-
[license-badge]: https://img.shields.io/npm/l/react-testing-library.svg?style=flat-square
54-
[license]: https://github.com/testing-library/react-testing-library/blob/master/LICENSE
55-
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
56-
[prs]: http://makeapullrequest.com
57-
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
58-
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
59-
[coc]: https://github.com/testing-library/react-testing-library/blob/master/CODE_OF_CONDUCT.md
60-
[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/react-testing-library.svg?style=social
61-
[github-watch]: https://github.com/testing-library/react-testing-library/watchers
62-
[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/react-testing-library.svg?style=social
63-
[github-star]: https://github.com/testing-library/react-testing-library/stargazers
64-
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-testing-library%20by%20%40kentcdodds%20https%3A%2F%2Fgithub.com%2Fkentcdodds%2Freact-testing-library%20%F0%9F%91%8D
65-
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/react-testing-library.svg?style=social
66-
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
67-
[all-contributors]: https://github.com/kentcdodds/all-contributors
68-
[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
69-
[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
70-
[data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
71-
[dom-testing-lib-textmatch]: https://github.com/testing-library/dom-testing-library#textmatch
7243
[bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
7344
[requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
7445
[good-first-issue]: https://github.com/testing-library/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+

docs/dom-testing-library/api-async.mdx

+46-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
11
---
22
id: api-async
3-
title: Async Utilities
3+
title: Async Methods
44
---
55

66
Several utilities are provided for dealing with asynchronous code. These can be
7-
useful to wait for an element to appear or disappear in response to an action.
8-
(See the [guide to testing disappearance](guide-disappearance.mdx).)
7+
useful to wait for an element to appear or disappear in response to an event,
8+
user action, timeout, or Promise. (See the
9+
[guide to testing disappearance](guide-disappearance.mdx).)
910

10-
All the async utils are built on top of `waitFor`.
11+
The async methods return Promises, so be sure to use `await` or `.then` when
12+
calling them.
13+
14+
## `findBy` Queries
15+
16+
`findBy` methods are a combination of `getBy`
17+
[queries](queries/about.mdx#types-of-queries) and [`waitFor`](#waitfor). They
18+
accept the waitFor options as the last argument (i.e.
19+
`await screen.findByText('text', queryOptions, waitForOptions)`).
20+
21+
`findBy` queries work when you expect an element to appear but the change to the
22+
DOM might not happen immediately.
23+
24+
```js
25+
const button = screen.getByRole('button', { name: 'Click Me' })
26+
fireEvent.click(button)
27+
await screen.findByText('Clicked once')
28+
fireEvent.click(button)
29+
await screen.findByText('Clicked twice')
30+
```
1131

1232
## `waitFor`
1333

@@ -122,7 +142,20 @@ waitForElementToBeRemoved(() => getByText(/not here/i)).catch((err) =>
122142

123143
The options object is forwarded to `waitFor`.
124144

125-
## `wait` (DEPRECATED, use waitFor instead)
145+
## Deprecated Methods
146+
147+
`wait`, `waitForDomChange`, and `waitForElement` have been combined into the
148+
`waitFor` method
149+
150+
<details>
151+
152+
<br />
153+
154+
<summary>Deprecated Methods</summary>
155+
156+
### `wait`
157+
158+
> (DEPRECATED, use waitFor instead)
126159

127160
```typescript
128161
function wait<T>(
@@ -144,7 +177,9 @@ Unlike wait, the callback parameter is mandatory in waitFor. Although you can
144177
migrate an existing `wait()` call to `waitFor( () => {} )`, it is considered bad
145178
practice to use an empty callback because it will make the tests more fragile.
146179

147-
## `waitForDomChange` (DEPRECATED, use waitFor instead)
180+
### `waitForDomChange`
181+
182+
> (DEPRECATED, use waitFor instead)
148183

149184
```typescript
150185
function waitForDomChange<T>(options?: {
@@ -205,7 +240,9 @@ will detect additions and removals of child elements (including text nodes) in
205240
the `container` and any of its descendants. It will also detect attribute
206241
changes.
207242

208-
## `waitForElement` (DEPRECATED, use `find*` queries or `waitFor`)
243+
### `waitForElement`
244+
245+
> (DEPRECATED, use `find*` queries or `waitFor`)
209246

210247
```typescript
211248
function waitForElement<T>(
@@ -263,3 +300,5 @@ The default `mutationObserverOptions` is
263300
will detect additions and removals of child elements (including text nodes) in
264301
the `container` and any of its descendants. It will also detect attribute
265302
changes.
303+
304+
</details>

docs/dom-testing-library/api-configuration.mdx

+31-24
Original file line numberDiff line numberDiff line change
@@ -61,31 +61,35 @@ configure({ testIdAttribute: 'data-my-test-id' })
6161
## Configuration options:
6262

6363
### `computedStyleSupportsPseudoElements`
64-
Set to `true` if `window.getComputedStyle` supports pseudo-elements i.e. a second argument. If
65-
you're using testing-library in a browser you almost always want to set this to
66-
`true`. Only very old browser don't support this property (such as IE 8 and
67-
earlier). However, `jsdom` does not support the second argument currently. This
68-
includes versions of `jsdom` prior to `16.4.0` and any version that logs a
69-
`not implemented` warning when calling `getComputedStyle` with a second argument
70-
e.g. `window.getComputedStyle(document.createElement('div'), '::after')`.
71-
Defaults to `false`
64+
65+
Set to `true` if `window.getComputedStyle` supports pseudo-elements i.e. a
66+
second argument. If you're using testing-library in a browser you almost always
67+
want to set this to `true`. Only very old browser don't support this property
68+
(such as IE 8 and earlier). However, `jsdom` does not support the second
69+
argument currently. This includes versions of `jsdom` prior to `16.4.0` and any
70+
version that logs a `not implemented` warning when calling `getComputedStyle`
71+
with a second argument e.g.
72+
`window.getComputedStyle(document.createElement('div'), '::after')`. Defaults to
73+
`false`
7274

7375
### `defaultHidden`
76+
7477
The default value for the `hidden` option used by
7578
[`getByRole`](api-queries.mdx#byrole). Defaults to `false`.
7679

7780
### `showOriginalStackTrace`
78-
By default, `waitFor` will ensure that the stack trace
79-
for errors thrown by Testing Library is cleaned up and shortened so it's easier
80-
for you to identify the part of your code that resulted in the error (async
81-
stack traces are hard to debug). If you want to disable this, then
82-
set`showOriginalStackTrace` to `false`. You can also disable this for a specific
83-
call in the options you pass to `waitFor`.
81+
82+
By default, `waitFor` will ensure that the stack trace for errors thrown by
83+
Testing Library is cleaned up and shortened so it's easier for you to identify
84+
the part of your code that resulted in the error (async stack traces are hard to
85+
debug). If you want to disable this, then set`showOriginalStackTrace` to
86+
`false`. You can also disable this for a specific call in the options you pass
87+
to `waitFor`.
8488

8589
### `throwSuggestions` (experimental)
86-
When enabled, if [better queries](https://testing-library.com/docs/guide-which-query) are
87-
available the test will fail and provide a suggested query to use instead.
88-
Default to `false`.
90+
91+
When enabled, if [better queries](queries/about.mdx#priority) are available the
92+
test will fail and provide a suggested query to use instead. Default to `false`.
8993

9094
To disable a suggestion for a single query just add `{suggest:false}` as an
9195
option.
@@ -95,14 +99,17 @@ screen.getByTestId('foo', { suggest: false }) // will not throw a suggestion
9599
```
96100

97101
### `testIdAttribute`
98-
The attribute used by [`getByTestId`](api-queries.mdx#bytestid) and related queries. Defaults to
99-
`data-testid`.
102+
103+
The attribute used by [`getByTestId`](api-queries.mdx#bytestid) and related
104+
queries. Defaults to `data-testid`.
100105

101106
### `getElementError`
102-
A function that returns the error used when
103-
[`getBy*`](api-queries.mdx#getby) or [`getAllBy*`](api-queries.mdx#getallby)
104-
fail. Takes the error message and container object as arguments.
107+
108+
A function that returns the error used when [`getBy*`](api-queries.mdx#getby) or
109+
[`getAllBy*`](api-queries.mdx#getallby) fail. Takes the error message and
110+
container object as arguments.
105111

106112
### `asyncUtilTimeout`
107-
The global timeout value in milliseconds used by `waitFor`
108-
utilities. Defaults to 1000ms.
113+
114+
The global timeout value in milliseconds used by `waitFor` utilities. Defaults
115+
to 1000ms.

docs/dom-testing-library/api-helpers.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ could do:
140140
```js
141141
import { within } from '@testing-library/dom'
142142

143-
const { getByText } = within(document.getElementById('messages'))
144-
const helloMessage = getByText('hello')
143+
const messages = document.getElementById('messages')
144+
const helloMessage = within(messages).getByText('hello')
145145
```
146146

147147
</TabItem>
@@ -167,7 +167,9 @@ cy.get('form').within(() => {
167167
</TabItem>
168168
</Tabs>
169169

170-
## `getRoles`
170+
## Accessibility
171+
172+
### `getRoles`
171173

172174
This function allows iteration over the implicit ARIA roles represented in a
173175
given tree of DOM nodes.
@@ -197,7 +199,7 @@ console.log(getRoles(nav))
197199
// }
198200
```
199201

200-
## `isInaccessible`
202+
### `isInaccessible`
201203

202204
This function will compute if the given element should be excluded from the
203205
accessibility API by the browser. It implements every **MUST** criteria from the

0 commit comments

Comments
 (0)