Skip to content

Commit d79fc56

Browse files
audiolionKent C. Dodds
authored and
Kent C. Dodds
committed
(docs): add faq entry about dealing with multiple data-testids (#4)
* Add faq entry about dealing with multiple data-testid with the same value * Add contributor * Generalize selector * Update .all-contributorsrc * Update README.md
1 parent df3df4a commit d79fc56

File tree

2 files changed

+35
-3
lines changed

2 files changed

+35
-3
lines changed

.all-contributorsrc

+10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"projectName": "react-testing-library",
33
"projectOwner": "kentcdodds",
4+
"repoType": "github",
45
"files": [
56
"README.md"
67
],
@@ -18,6 +19,15 @@
1819
"infra",
1920
"test"
2021
]
22+
},
23+
{
24+
"login": "audiolion",
25+
"name": "Ryan Castner",
26+
"avatar_url": "https://avatars1.githubusercontent.com/u/2430381?v=4",
27+
"profile": "http://audiolion.github.io",
28+
"contributions": [
29+
"doc"
30+
]
2131
}
2232
]
2333
}

README.md

+25-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
[![downloads][downloads-badge]][npmtrends]
1313
[![MIT License][license-badge]][license]
1414

15-
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
15+
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
1616
[![PRs Welcome][prs-badge]][prs]
1717
[![Code of Conduct][coc-badge]][coc]
1818

@@ -253,6 +253,28 @@ const allLisInDiv = container.querySelectorAll('div li')
253253
const rootElement = container.firstChild
254254
```
255255

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+
256278
**What about enzyme is "bloated with complexity and features" and "encourage poor testing
257279
practices"**
258280

@@ -315,8 +337,8 @@ Thanks goes to these people ([emoji key][emojis]):
315337
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
316338

317339
<!-- 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+
| :---: | :---: |
320342

321343
<!-- ALL-CONTRIBUTORS-LIST:END -->
322344

0 commit comments

Comments
 (0)