|
12 | 12 | [![downloads][downloads-badge]][npmtrends]
|
13 | 13 | [![MIT License][license-badge]][license]
|
14 | 14 |
|
15 |
| -[](#contributors) |
| 15 | +[](#contributors) |
16 | 16 | [![PRs Welcome][prs-badge]][prs]
|
17 | 17 | [![Code of Conduct][coc-badge]][coc]
|
18 | 18 |
|
@@ -253,6 +253,28 @@ const allLisInDiv = container.querySelectorAll('div li')
|
253 | 253 | const rootElement = container.firstChild
|
254 | 254 | ```
|
255 | 255 |
|
| 256 | +**What if I’m iterating over a list of items that I want to put the data-testid="item" attribute on. How do I distinguish them from each other?** |
| 257 | + |
| 258 | +You can make your selector just choose the one you want by including :nth-child in the selector. |
| 259 | + |
| 260 | +```javascript |
| 261 | +const thirdLiInUl = container.querySelector('ul > li:nth-child(3)') |
| 262 | +``` |
| 263 | + |
| 264 | +Or you could include the index or an ID in your attribute: |
| 265 | + |
| 266 | +```javascript |
| 267 | +<li data-testid={`item-${item.id}`}>{item.text}</li> |
| 268 | +``` |
| 269 | + |
| 270 | +And then you could use the `queryByTestId`: |
| 271 | + |
| 272 | +```javascript |
| 273 | +const items = [/* your items */] |
| 274 | +const {queryByTestId} = render(/* your component with the items */) |
| 275 | +const thirdItem = queryByTestId(`item-${items[2].id}`) |
| 276 | +``` |
| 277 | + |
256 | 278 | **What about enzyme is "bloated with complexity and features" and "encourage poor testing
|
257 | 279 | practices"**
|
258 | 280 |
|
@@ -315,8 +337,8 @@ Thanks goes to these people ([emoji key][emojis]):
|
315 | 337 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
316 | 338 |
|
317 | 339 | <!-- prettier-ignore -->
|
318 |
| -| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | |
319 |
| -| :---: | |
| 340 | +| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | |
| 341 | +| :---: | :---: | |
320 | 342 |
|
321 | 343 | <!-- ALL-CONTRIBUTORS-LIST:END -->
|
322 | 344 |
|
|
0 commit comments