Skip to content

Commit 8048df5

Browse files
committed
Fix up custom render + rerender samples
The get/query methods in the "how to override data-testid" sample were not `.bind`ing correctly; I've replaced them with arrow functions as suggested. They were also passing in `container`, which wasn't correct. Also, a `rerender` implementation is needed in such a custom renderer, so I've added one to the sample. I've also fixed up the separate custom rerender sample as it a) incorrectly advertised an options parameter, and b) didn't pass along the original baseElement. For: #225
1 parent 11a41ce commit 8048df5

File tree

2 files changed

+52
-25
lines changed

2 files changed

+52
-25
lines changed

.all-contributorsrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -595,6 +595,17 @@
595595
"contributions": [
596596
"doc"
597597
]
598+
},
599+
{
600+
"login": "RoystonS",
601+
"name": "Royston Shufflebotham",
602+
"avatar_url": "https://avatars0.githubusercontent.com/u/19773?v=4",
603+
"profile": "https://github.com/RoystonS",
604+
"contributions": [
605+
"bug",
606+
"doc",
607+
"example"
608+
]
598609
}
599610
]
600611
}

README.md

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,23 @@
1111
<hr />
1212

1313
[![Build Status][build-badge]][build]
14+
1415
[![Code Coverage][coverage-badge]][coverage]
16+
1517
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
18+
1619
[![MIT License][license-badge]][license]
1720

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+
1923
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
24+
2025
[![Join the community on Spectrum][spectrum-badge]][spectrum]
2126

2227
[![Watch on GitHub][github-watch-badge]][github-watch]
28+
2329
[![Star on GitHub][github-star-badge]][github-star]
30+
2431
[![Tweet][twitter-badge]][twitter]
2532

2633
<div align="center">
@@ -82,6 +89,7 @@ facilitate testing implementation details). Read more about this in
8289
## What is react-testing-library?
8390

8491
Have a look at the video below for an explanation. <br/><br/>
92+
8593
[![what is react testing library](https://img.youtube.com/vi/JKOwJUM4_RM/0.jpg)](https://youtu.be/JKOwJUM4_RM 'what is react testing library')
8694

8795
## Example
@@ -317,12 +325,15 @@ return value of the customRender.
317325
```js
318326
// test-utils.js
319327

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)
322330
return {
323331
...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+
}),
326337
}
327338
}
328339
```
@@ -621,24 +632,22 @@ change. This follows the precedent set by
621632
which uses a `testID` prop which emits a `data-testid` attribute on the element.
622633
623634
[#76](https://github.com/kentcdodds/dom-testing-library/issues/76#issuecomment-406321122)
635+
624636
[#128](https://github.com/kentcdodds/dom-testing-library/issues/128)
637+
625638
[#204](https://github.com/kentcdodds/react-testing-library/issues/204).
626639
627640
What you can do is to create a [custom render](#custom-render) that overwrites
628-
`getByTestId`:
641+
`getByTestId` and related methods, and also `rerender`:
629642
630643
```js
631644
// test-utils.js
632645
import {render, queryHelpers} from 'react-testing-library'
633646

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)
642651

643652
export function getAllByTestId(container, id, ...rest) {
644653
const els = queryAllByTestId(container, id, ...rest)
@@ -651,19 +660,25 @@ export function getAllByTestId(container, id, ...rest) {
651660
return els
652661
}
653662

654-
export function getByTestId(...args) {
655-
return queryHelpers.firstResultOrNull(getAllByTestId, ...args)
656-
}
663+
export const getByTestId = (...rest) =>
664+
queryHelpers.firstResultOrNull(getAllByTestId, ...rest)
657665

658-
const customRender = (container, options) => {
659-
const utils = render(container, options)
666+
const customRender = (ui, options) => {
667+
const rendered = render(ui, options)
660668

661669
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+
}),
667682
}
668683
}
669684

@@ -1336,6 +1351,7 @@ inspired by and mostly compatible with this library.
13361351
In preparing this project,
13371352
[I tweeted about it](https://twitter.com/kentcdodds/status/974278185540964352)
13381353
and [Sune Simonsen](https://github.com/sunesimonsen)
1354+
13391355
[took up the challenge](https://twitter.com/sunesimonsen/status/974784783908818944).
13401356
We had different ideas of what to include in the library, so I decided to create
13411357
this one instead.
@@ -1378,7 +1394,7 @@ Thanks goes to these people ([emoji key][emojis]):
13781394
| [<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") |
13791395
| [<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") |
13801396
| [<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") |
13821398
13831399
<!-- ALL-CONTRIBUTORS-LIST:END -->
13841400

0 commit comments

Comments
 (0)