Skip to content

Commit d4a6720

Browse files
committed
Update README with new match examples
1 parent e7809dd commit d4a6720

File tree

1 file changed

+32
-15
lines changed

1 file changed

+32
-15
lines changed

README.md

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -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)
473474
Several 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

Comments
 (0)