Skip to content
Merged
Changes from all commits
Commits
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
29 changes: 15 additions & 14 deletions docs/queries/about.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ test('should show login form', () => {
- `getBy...`: Returns the matching node for a query, and throw a descriptive
error if no elements match _or_ if more than one match is found (use
`getAllBy` instead if more than one element is expected).
- `queryBy...`: Returns the matching node for a query, and return `null`
if no elements match. This is useful for asserting an element that is not
present. Throws an error if more than one match is found (use `queryAllBy`
instead if this is OK).
- `queryBy...`: Returns the matching node for a query, and return `null` if no
elements match. This is useful for asserting an element that is not present.
Throws an error if more than one match is found (use `queryAllBy` instead if
this is OK).
- `findBy...`: Returns a Promise which resolves when an element is found which
matches the given query. The promise is rejected if no element is found or
if more than one element is found after a default timeout of 1000ms. If you
Expand Down Expand Up @@ -85,9 +85,9 @@ test('should show login form', () => {
| `queryBy...` | Return `null` | Return element | Throw error | No |
| `findBy...` | Throw error | Return element | Throw error | Yes |
| **Multiple Elements** | | | | |
| `getAllBy...` | Throw | Return array | Return array | No |
| `getAllBy...` | Throw error | Return array | Return array | No |
| `queryAllBy...` | Return `[]` | Return array | Return array | No |
| `findAllBy...` | Throw | Return array | Return array | Yes |
| `findAllBy...` | Throw error | Return array | Return array | Yes |

</details>

Expand Down Expand Up @@ -176,9 +176,8 @@ All of the queries exported by DOM Testing Library accept a `container` as the
first argument. Because querying the entire `document.body` is very common, DOM
Testing Library also exports a `screen` object which has every query that is
pre-bound to `document.body` (using the
[`within`](dom-testing-library/api-within.mdx)
functionality). Wrappers such as React Testing Library re-export `screen` so you
can use it the same way.
[`within`](dom-testing-library/api-within.mdx) functionality). Wrappers such as
React Testing Library re-export `screen` so you can use it the same way.

Here's how you use it:

Expand Down Expand Up @@ -403,11 +402,13 @@ const foo = container.querySelector('[data-foo="bar"]')

Do you still have problems knowing how to use Testing Library queries?

There is a very cool Browser extension for [Chrome](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related) and [Firefox](https://addons.mozilla.org/en/firefox/addon/testing-playground/) named Testing Playground,
and it helps you find the best queries to select elements. It allows you to
inspect the element hierarchies in the Browser's Developer Tools, and provides you
with suggestions on how to select them, while encouraging good testing
practices.
There is a very cool Browser extension for
[Chrome](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related)
and [Firefox](https://addons.mozilla.org/en/firefox/addon/testing-playground/)
named Testing Playground, and it helps you find the best queries to select
elements. It allows you to inspect the element hierarchies in the Browser's
Developer Tools, and provides you with suggestions on how to select them, while
encouraging good testing practices.

## Playground

Expand Down