|
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