@@ -89,8 +89,9 @@ facilitate testing implementation details). Read more about this in
89
89
* [ ` waitForElement ` ] ( #waitforelement )
90
90
* [ ` fireEvent(node: HTMLElement, event: Event) ` ] ( #fireeventnode-htmlelement-event-event )
91
91
* [ ` TextMatch ` ] ( #textmatch )
92
+ * [ Examples] ( #examples )
92
93
* [ ` query ` APIs] ( #query-apis )
93
- * [ Examples] ( #examples )
94
+ * [ Examples] ( #examples-1 )
94
95
* [ FAQ] ( #faq )
95
96
* [ Other Solutions] ( #other-solutions )
96
97
* [ Guiding Principles] ( #guiding-principles )
@@ -473,22 +474,37 @@ fireEvent.click(getElementByText('Submit'), rightClick)
473
474
Several APIs accept a ` TextMatch ` which can be a ` string ` , ` regex ` or a
474
475
` function ` which returns ` true ` for a match and ` false ` for a mismatch .
475
476
476
- Here ' s an example
477
+ See [dom - testing - library #textmatch ][dom - testing - lib - textmatch ] for options .
478
+
479
+ ### Examples
477
480
478
481
` ` ` javascript
479
- // <div>Hello World</div>
480
- // all of the following will find the div
481
- getByText('Hello World') // full match
482
- getByText('llo worl') // substring match
483
- getByText('hello world') // strings ignore case
484
- getByText(/Hello W?oRlD/i) // regex
485
- getByText((content, element) => content.startsWith('Hello')) // function
486
-
487
- // all of the following will NOT find the div
488
- getByText('Goodbye World') // non-string match
489
- getByText(/hello world/) // case-sensitive regex with different case
490
- // function looking for a span when it's actually a div
491
- getByText((content, element) => {
482
+ // <div>
483
+ // Hello World
484
+ // </div>
485
+
486
+ // WILL find the div:
487
+
488
+ // Matching a string:
489
+ getByText(container, 'Hello World') // full string match
490
+ getByText(container, 'llo Worl'), {exact: false} // substring match
491
+ getByText(container, 'hello world', {exact: false}) // ignore case
492
+
493
+ // Matching a regex:
494
+ getByText(container, /World/) // substring match
495
+ getByText(container, /world/i) // substring match, ignore case
496
+ getByText(container, /^hello world$/i) // full string match, ignore case
497
+ getByText(container, /Hello W?oRlD/i) // advanced regex
498
+
499
+ // Matching with a custom function:
500
+ getByText(container, (content, element) => content.startsWith('Hello'))
501
+
502
+ // WILL NOT find the div:
503
+
504
+ getByText(container, 'Goodbye World') // full string does not match
505
+ getByText(container, /hello world/) // case-sensitive regex with different case
506
+ // function looking for a span when it's actually a div:
507
+ getByText(container, (content, element) => {
492
508
return element.tagName.toLowerCase() === 'span' && content.startsWith('Hello')
493
509
})
494
510
` ` `
@@ -863,6 +879,7 @@ Links:
863
879
[set -immediate ]: https : // developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
864
880
[guiding -principle ]: https : // twitter.com/kentcdodds/status/977018512689455106
865
881
[data -testid -blog -post ]: https : // blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
882
+ [dom -testing -lib -textmatch ]: https : // github.com/kentcdodds/dom-testing-library#textmatch
866
883
[bugs ]: https : // github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
867
884
[requests ]: https : // github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
868
885
[good -first -issue ]: https : // github.com/kentcdodds/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
0 commit comments