docs: ✏️ explain how to implement custo getByTestId #207
Conversation
README.md
Outdated
| @@ -557,6 +557,47 @@ const usernameInputElement = getByTestId('username-input') | |||
| > about `data-testid`s from the blog post ["Making your UI tests resilient to | |||
| > change"][data-testid-blog-post] | |||
|
|
|||
| <details> | |||
| <summary>What if my project already uses <code>data-test-id</code> do I have to migrate to <code>data-testid</code>? | |||
There was a problem hiding this comment.
<summary>What if my project already uses <code>data-test-id</code>? Do I have to migrate to <code>data-testid</code>?
| return { | ||
| ...utils, | ||
| getByTestId: id => { | ||
| const el = utils.container.querySelector(`[data-test-id="${id}"]`) |
There was a problem hiding this comment.
I think it would be good to use the query helpers from dom-testing-library to allow the custom function to support functions, strings, and regex and the exact and preserveWhitespace options in the same way as the other queries:
https://github.com/kentcdodds/dom-testing-library/blob/master/src/query-helpers.js#L36-L47
There was a problem hiding this comment.
This could mirror the implementation of the base query:
const queryByTestId = queryByAttribute.bind(null, 'data-test-id')
const queryAllByTestId = queryAllByAttribute.bind(null, 'data-test-id')
function getAllByTestId(container, id, ...rest) {
const els = queryAllByTestId(container, id, ...rest)
if (!els.length) {
throw getElementError(
`Unable to find an element by: [data-test-id="${id}"]`,
container,
)
}
return els
}
function getByTestId(...args) {
return firstResultOrNull(getAllByTestId, ...args)
}https://github.com/kentcdodds/dom-testing-library/blob/master/src/queries.js#L153-L154
There was a problem hiding this comment.
True, feel fee to make another PR to improve that :) Thanks!
There was a problem hiding this comment.
I used the query helpers in a firs implementation but I was worried the example would go out of sync if the internals for dom-testing-library changed
There was a problem hiding this comment.
Good point. If it's an explicitly exported value, then it should be pretty solid. But if you're importing things from dist then that's probably not safe.
There was a problem hiding this comment.
Query helpers are exported directly for this very use case
https://github.com/kentcdodds/dom-testing-library/blob/master/src/index.js
|
🎉 This PR is included in version 5.2.2 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
…ab-respect-radio-groups fix(tab): make tab respect radio groups (fix testing-library#207)
What:
Adding an explanation on how to implement a
getByTestIdthat looks fordata-test-id.Why:
Because people tend to ask this question.
How:
Checklist: