Skip to content

Commit 6f01eeb

Browse files
author
Kent C. Dodds
authored
docs: update getByAltText docs
Also reorder things a bit. Sorta different categories, but makes sense to me.
1 parent 9792568 commit 6f01eeb

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

README.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,16 @@ const inputNode = getByPlaceholderText('Username')
215215
> NOTE: a placeholder is not a good substitute for a label so you should
216216
> generally use `getByLabelText` instead.
217217
218+
#### `getByText(text: TextMatch): HTMLElement`
219+
220+
This will search for all elements that have a text node with `textContent`
221+
matching the given [`TextMatch`](#textmatch).
222+
223+
```javascript
224+
// <a href="/about">About ℹ️</a>
225+
const aboutAnchorNode = getByText('about')
226+
```
227+
218228
#### `getByAltText(text: TextMatch): HTMLElement`
219229

220230
This will return the element (normally an `<img>`) that has the given `alt`
@@ -226,17 +236,7 @@ and [`<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area)
226236

227237
```javascript
228238
// <img alt="Incredibles 2 Poster" src="/incredibles-2.png" />
229-
const incrediblesPosterImg = getByText(/incredibles.*poster/)
230-
```
231-
232-
#### `getByText(text: TextMatch): HTMLElement`
233-
234-
This will search for all elements that have a text node with `textContent`
235-
matching the given [`TextMatch`](#textmatch).
236-
237-
```javascript
238-
// <a href="/about">About ℹ️</a>
239-
const aboutAnchorNode = getByText('about')
239+
const incrediblesPosterImg = getByAltText(/incredibles.*poster$/i)
240240
```
241241

242242
#### `getByTestId(text: TextMatch): HTMLElement`
@@ -407,11 +407,11 @@ in mind, we recommend this order of priority:
407407
method a user finds those elements, so it should be your top preference.
408408
2. `getByPlaceholderText`: [A placeholder is not a substitute for a label](https://www.nngroup.com/articles/form-design-placeholders/).
409409
But if that's all you have, then it's better than alternatives.
410-
3. `getByAltText`: If your element is one which supports `alt` text
411-
(`img`, `area`, and `input`), then you can use this to find that element.
412-
4. `getByText`: Not useful for forms, but this is the number 1 method a user
410+
3. `getByText`: Not useful for forms, but this is the number 1 method a user
413411
finds other elements (like buttons to click), so it should be your top
414412
preference for non-form elements.
413+
4. `getByAltText`: If your element is one which supports `alt` text
414+
(`img`, `area`, and `input`), then you can use this to find that element.
415415
5. `getByTestId`: The user cannot see (or hear) these, so this is only
416416
recommended for cases where you can't match by text or it doesn't make sense
417417
(the text is dynamic).

0 commit comments

Comments
 (0)