Skip to content

Commit 3cc387b

Browse files
GpxKent C. Dodds
authored and
Kent C. Dodds
committed
docs: ✏️ explain how to implement custo getByTestId (#207)
<!-- Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file). Also, please make sure you're familiar with and follow the instructions in the contributing guidelines (found in the CONTRIBUTING.md file). If you're new to contributing to open source projects, you might find this free video course helpful: http://kcd.im/pull-request Please fill out the information below to expedite the review and (hopefully) merge of your pull request! --> <!-- What changes are being made? (What feature/bug is being fixed here?) --> **What**: Adding an explanation on how to implement a `getByTestId` that looks for `data-test-id`. <!-- Why are these changes necessary? --> **Why**: <!-- How were these changes implemented? --> Because people tend to ask this question. **How**: <!-- Have you done all of these things? --> **Checklist**: <!-- add "N/A" to the end of each line that's irrelevant to your changes --> <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" --> - [x] Documentation - [ ] Tests N/A - [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? --> - [ ] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions --> <!-- feel free to add additional comments -->
1 parent fe3b65c commit 3cc387b

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,47 @@ const usernameInputElement = getByTestId('username-input')
557557
> about `data-testid`s from the blog post ["Making your UI tests resilient to
558558
> change"][data-testid-blog-post]
559559
560+
<details>
561+
<summary>What if my project already uses <code>data-test-id</code>? Do I have to migrate to <code>data-testid</code>?
562+
</summary>
563+
564+
`getByTestId` is looking for the `data-testid` attribute and that's not going to
565+
change
566+
[#76](https://github.com/kentcdodds/dom-testing-library/issues/76#issuecomment-406321122)
567+
[#128](https://github.com/kentcdodds/dom-testing-library/issues/128)
568+
[#204](https://github.com/kentcdodds/react-testing-library/issues/204).
569+
570+
What you can do is to create a [custom render](#custom-render) that overwrites
571+
`getByTestId`:
572+
573+
```js
574+
// test-utils.js
575+
import {render} from 'react-testing-library'
576+
577+
const customRender = (node, ...options) => {
578+
const utils = render(node, ...options)
579+
580+
return {
581+
...utils,
582+
getByTestId: id => {
583+
const el = utils.container.querySelector(`[data-test-id="${id}"]`)
584+
if (!el) {
585+
throw Error(`Unable to find an element by: [data-test-id="${id}"]`)
586+
}
587+
return el
588+
},
589+
}
590+
}
591+
592+
// re-export everything
593+
export * from 'react-testing-library'
594+
595+
// override render method
596+
export {customRender as render}
597+
```
598+
599+
</details>
600+
560601
#### `asFragment(): DocumentFragment`
561602
562603
Returns a `DocumentFragment` of your rendered component. This can be useful if

0 commit comments

Comments
 (0)