@@ -215,6 +215,16 @@ const inputNode = getByPlaceholderText('Username')
215
215
> NOTE: a placeholder is not a good substitute for a label so you should
216
216
> generally use ` getByLabelText ` instead.
217
217
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
+
218
228
#### ` getByAltText(text: TextMatch): HTMLElement `
219
229
220
230
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)
226
236
227
237
``` javascript
228
238
// <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 )
240
240
```
241
241
242
242
#### ` getByTestId(text: TextMatch): HTMLElement `
@@ -407,11 +407,11 @@ in mind, we recommend this order of priority:
407
407
method a user finds those elements, so it should be your top preference.
408
408
2. ` getByPlaceholderText ` : [A placeholder is not a substitute for a label](https://www.nngroup.com/articles/form-design-placeholders/).
409
409
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
413
411
finds other elements (like buttons to click), so it should be your top
414
412
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.
415
415
5. ` getByTestId ` : The user cannot see (or hear) these, so this is only
416
416
recommended for cases where you can't match by text or it doesn't make sense
417
417
(the text is dynamic).
0 commit comments