diff --git a/docs/queries/about.mdx b/docs/queries/about.mdx index a9544468a..7f931e681 100644 --- a/docs/queries/about.mdx +++ b/docs/queries/about.mdx @@ -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 @@ -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 | @@ -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: @@ -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