@@ -89,8 +89,9 @@ facilitate testing implementation details). Read more about this in
8989 * [ ` waitForElement ` ] ( #waitforelement )
9090 * [ ` fireEvent(node: HTMLElement, event: Event) ` ] ( #fireeventnode-htmlelement-event-event )
9191* [ ` TextMatch ` ] ( #textmatch )
92+ * [ Examples] ( #examples )
9293* [ ` query ` APIs] ( #query-apis )
93- * [ Examples] ( #examples )
94+ * [ Examples] ( #examples-1 )
9495* [ FAQ] ( #faq )
9596* [ Other Solutions] ( #other-solutions )
9697* [ Guiding Principles] ( #guiding-principles )
@@ -473,22 +474,37 @@ fireEvent.click(getElementByText('Submit'), rightClick)
473474Several APIs accept a ` TextMatch ` which can be a ` string ` , ` regex ` or a
474475` function ` which returns ` true ` for a match and ` false ` for a mismatch .
475476
476- Here ' s an example
477+ See [dom - testing - library #textmatch ][dom - testing - lib - textmatch ] for options .
478+
479+ ### Examples
477480
478481` ` ` 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) => {
492508 return element.tagName.toLowerCase() === 'span' && content.startsWith('Hello')
493509})
494510` ` `
@@ -863,6 +879,7 @@ Links:
863879[set -immediate ]: https : // developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
864880[guiding -principle ]: https : // twitter.com/kentcdodds/status/977018512689455106
865881[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
866883[bugs ]: https : // github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
867884[requests ]: https : // github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
868885[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