11
11
<hr />
12
12
13
13
[ ![ Build Status] [ build-badge ]] [ build ]
14
+
14
15
[ ![ Code Coverage] [ coverage-badge ]] [ coverage ]
16
+
15
17
[ ![ version] [ version-badge ]] [ package ] [ ![ downloads] [ downloads-badge ]] [ npmtrends ]
18
+
16
19
[ ![ MIT License] [ license-badge ]] [ license ]
17
20
18
- [ ![ All Contributors] ( https://img.shields.io/badge/all_contributors-61-orange.svg?style=flat-square )] ( #contributors )
21
+ [ ![ All Contributors] ( https://img.shields.io/badge/all_contributors-62-orange.svg?style=flat-square )] ( #contributors )
22
+
19
23
[ ![ PRs Welcome] [ prs-badge ]] [ prs ] [ ![ Code of Conduct] [ coc-badge ]] [ coc ]
24
+
20
25
[ ![ Join the community on Spectrum] [ spectrum-badge ]] [ spectrum ]
21
26
22
27
[ ![ Watch on GitHub] [ github-watch-badge ]] [ github-watch ]
28
+
23
29
[ ![ Star on GitHub] [ github-star-badge ]] [ github-star ]
30
+
24
31
[ ![ Tweet] [ twitter-badge ]] [ twitter ]
25
32
26
33
<div align =" center " >
@@ -82,6 +89,7 @@ facilitate testing implementation details). Read more about this in
82
89
## What is react-testing-library?
83
90
84
91
Have a look at the video below for an explanation. <br /><br />
92
+
85
93
[ ![ what is react testing library] ( https://img.youtube.com/vi/JKOwJUM4_RM/0.jpg )] ( https://youtu.be/JKOwJUM4_RM ' what is react testing library ')
86
94
87
95
## Example
@@ -317,12 +325,15 @@ return value of the customRender.
317
325
``` js
318
326
// test-utils.js
319
327
320
- const customRender = (node , options ) => {
321
- const rendered = render (< div> {node }< / div> , options)
328
+ const customRender = (ui , options ) => {
329
+ const rendered = render (< div> {ui }< / div> , options)
322
330
return {
323
331
... rendered,
324
- rerender : (ui , options ) =>
325
- customRender (ui, {container: rendered .container , ... options}),
332
+ rerender : newUi =>
333
+ customRender (newUi, {
334
+ container: rendered .container ,
335
+ baseElement: rendered .baseElement ,
336
+ }),
326
337
}
327
338
}
328
339
```
@@ -621,24 +632,22 @@ change. This follows the precedent set by
621
632
which uses a ` testID ` prop which emits a ` data - testid ` attribute on the element.
622
633
623
634
[#76](https://github.com/kentcdodds/dom-testing-library/issues/76#issuecomment-406321122)
635
+
624
636
[#128](https://github.com/kentcdodds/dom-testing-library/issues/128)
637
+
625
638
[#204](https://github.com/kentcdodds/react-testing-library/issues/204).
626
639
627
640
What you can do is to create a [custom render](#custom-render) that overwrites
628
- ` getByTestId ` :
641
+ ` getByTestId ` and related methods, and also ` rerender ` :
629
642
630
643
` ` ` js
631
644
// test-utils.js
632
645
import {render , queryHelpers } from ' react-testing-library'
633
646
634
- export const queryByTestId = queryHelpers .queryByAttribute .bind (
635
- null ,
636
- ' data-test-id' ,
637
- )
638
- export const queryAllByTestId = queryHelpers .queryAllByAttribute .bind (
639
- null ,
640
- ' data-test-id' ,
641
- )
647
+ export const queryByTestId = (... rest ) =>
648
+ queryHelpers .queryByAttribute (' data-test-id' , ... rest )
649
+ export const queryAllByTestId = (... rest ) =>
650
+ queryHelpers .queryAllByAttribute (' data-test-id' , ... rest )
642
651
643
652
export function getAllByTestId(container , id , ... rest ) {
644
653
const els = queryAllByTestId (container , id , ... rest )
@@ -651,19 +660,25 @@ export function getAllByTestId(container, id, ...rest) {
651
660
return els
652
661
}
653
662
654
- export function getByTestId(... args ) {
655
- return queryHelpers .firstResultOrNull (getAllByTestId , ... args )
656
- }
663
+ export const getByTestId = (... rest ) =>
664
+ queryHelpers .firstResultOrNull (getAllByTestId , ... rest )
657
665
658
- const customRender = (container , options ) => {
659
- const utils = render (container , options )
666
+ const customRender = (ui , options ) => {
667
+ const rendered = render (ui , options )
660
668
661
669
return {
662
- ... utils ,
663
- getByTestId: getByTestId .bind (container ),
664
- getAllByTestId: getAllByTestId .bind (container ),
665
- queryByTestId: queryByTestId .bind (container ),
666
- queryAllByTestId: queryAllByTestId .bind (container ),
670
+ ... rendered ,
671
+ getByTestId : (... rest ) => getByTestId (rendered .container , ... rest ),
672
+ getAllByTestId : (... rest ) => getAllByTestId (rendered .container , ... rest ),
673
+ queryByTestId : (... rest ) => queryByTestId (rendered .container , ... rest ),
674
+ queryAllByTestId : (... rest ) =>
675
+ queryAllByTestId (rendered .container , ... rest ),
676
+
677
+ rerender : newUi =>
678
+ customRender (newUi , {
679
+ container: rendered .container ,
680
+ baseElement: rendered .baseElement ,
681
+ }),
667
682
}
668
683
}
669
684
@@ -1336,6 +1351,7 @@ inspired by and mostly compatible with this library.
1336
1351
In preparing this project,
1337
1352
[I tweeted about it](https://twitter.com/kentcdodds/status/974278185540964352)
1338
1353
and [Sune Simonsen](https://github.com/sunesimonsen)
1354
+
1339
1355
[took up the challenge](https://twitter.com/sunesimonsen/status/974784783908818944).
1340
1356
We had different ideas of what to include in the library, so I decided to create
1341
1357
this one instead.
@@ -1378,7 +1394,7 @@ Thanks goes to these people ([emoji key][emojis]):
1378
1394
| [<img src="https://avatars2.githubusercontent.com/u/5286559?v=4" width="100px;"/><br /><sub><b>Mark Pollmann</b></sub>](https://markpollmann.com/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=MarkPollmann "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1213123?v=4" width="100px;"/><br /><sub><b>Ehtesham Kafeel</b></sub>](https://github.com/ehteshamkafeel)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=ehteshamkafeel "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=ehteshamkafeel "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/1493505?v=4" width="100px;"/><br /><sub><b>Julio Pavón</b></sub>](http://jpavon.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=jpavon "Code") | [<img src="https://avatars3.githubusercontent.com/u/1765048?v=4" width="100px;"/><br /><sub><b>Duncan L</b></sub>](http://www.duncanleung.com/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=duncanleung "Documentation") [💡](#example-duncanleung "Examples") | [<img src="https://avatars1.githubusercontent.com/u/700778?v=4" width="100px;"/><br /><sub><b>Tiago Almeida</b></sub>](https://www.linkedin.com/in/tyagow/?locale=en_US)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=tyagow "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/4982001?v=4" width="100px;"/><br /><sub><b>Robert Smith</b></sub>](http://rbrtsmith.com/)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Arbrtsmith "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1700355?v=4" width="100px;"/><br /><sub><b>Zach Green</b></sub>](https://offbyone.tech)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=zgreen "Documentation") |
1379
1395
| [<img src="https://avatars3.githubusercontent.com/u/881986?v=4" width="100px;"/><br /><sub><b>dadamssg</b></sub>](https://github.com/dadamssg)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8734097?v=4" width="100px;"/><br /><sub><b>Yazan Aabed</b></sub>](https://www.yaabed.com/)<br />[📝](#blog-YazanAabeed "Blogposts") | [<img src="https://avatars0.githubusercontent.com/u/556258?v=4" width="100px;"/><br /><sub><b>Tim</b></sub>](https://github.com/timbonicus)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [<img src="https://avatars3.githubusercontent.com/u/6682655?v=4" width="100px;"/><br /><sub><b>Divyanshu Maithani</b></sub>](http://divyanshu.xyz)<br />[✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [<img src="https://avatars2.githubusercontent.com/u/9116042?v=4" width="100px;"/><br /><sub><b>Deepak Grover</b></sub>](https://www.linkedin.com/in/metagrover)<br />[✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [<img src="https://avatars0.githubusercontent.com/u/16276358?v=4" width="100px;"/><br /><sub><b>Eyal Cohen</b></sub>](https://github.com/eyalcohen4)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/7452681?v=4" width="100px;"/><br /><sub><b>Peter Makowski</b></sub>](https://github.com/petermakowski)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
1380
1396
| [<img src="https://avatars2.githubusercontent.com/u/20361668?v=4" width="100px;"/><br /><sub><b>Michiel Nuyts</b></sub>](https://github.com/Michielnuyts)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](https://github.com/joeynimu)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/19998290?v=4" width="100px;"/><br /><sub><b>Kate</b></sub>](https://github.com/Enikol)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/11980217?v=4" width="100px;"/><br /><sub><b>Sean</b></sub>](http://www.seanrparker.com)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/17031?v=4" width="100px;"/><br /><sub><b>James Long</b></sub>](http://jlongster.com)<br />[🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [<img src="https://avatars1.githubusercontent.com/u/10118777?v=4" width="100px;"/><br /><sub><b>Herb Hagely</b></sub>](https://github.com/hhagely)<br />[💡](#example-hhagely "Examples") | [<img src="https://avatars2.githubusercontent.com/u/5779538?v=4" width="100px;"/><br /><sub><b>Alex Wendte</b></sub>](http://www.wendtedesigns.com/)<br />[💡](#example-themostcolm "Examples") |
1381
- | [<img src="https://avatars0.githubusercontent.com/u/6998954?v=4" width="100px;"/><br /><sub><b>Monica Powell</b></sub>](http://www.aboutmonica.com)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/2699953?v=4" width="100px;"/><br /><sub><b>Vitaly Sivkov</b></sub>](http://sivkoff.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [<img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;"/><br /><sub><b>Weyert de Boer</b></sub>](https://github.com/weyert)<br />[🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/13613037?v=4" width="100px;"/><br /><sub><b>EstebanMarin</b></sub>](https://github.com/EstebanMarin)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/13953703?v=4" width="100px;"/><br /><sub><b>Victor Martins</b></sub>](https://github.com/vctormb)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") |
1397
+ | [<img src="https://avatars0.githubusercontent.com/u/6998954?v=4" width="100px;"/><br /><sub><b>Monica Powell</b></sub>](http://www.aboutmonica.com)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/2699953?v=4" width="100px;"/><br /><sub><b>Vitaly Sivkov</b></sub>](http://sivkoff.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [<img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;"/><br /><sub><b>Weyert de Boer</b></sub>](https://github.com/weyert)<br />[🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/13613037?v=4" width="100px;"/><br /><sub><b>EstebanMarin</b></sub>](https://github.com/EstebanMarin)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/13953703?v=4" width="100px;"/><br /><sub><b>Victor Martins</b></sub>](https://github.com/vctormb)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/19773?v=4" width="100px;"/><br /><sub><b>Royston Shufflebotham</b></sub>](https://github.com/RoystonS)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") |
1382
1398
1383
1399
<!-- ALL-CONTRIBUTORS-LIST:END -->
1384
1400
0 commit comments