Skip to content

Commit b07bf6b

Browse files
alexkrolickKent C. Dodds
authored and
Kent C. Dodds
committed
docs: add custom query example (#146)
- show the much-asked-for data-test-id override as the default example - use commonjs module syntax due to a babel 6 issue with overwriting named exports (not present in v7) <!-- 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**: <!-- Why are these changes necessary? --> **Why**: <!-- How were these changes implemented? --> **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" --> - [ ] Documentation - [ ] Tests - [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 7c90770 commit b07bf6b

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

README.md

+43
Original file line numberDiff line numberDiff line change
@@ -710,6 +710,49 @@ expect(queryByTestId(container, 'greetings')).not.toHaveTextContent('Bye bye')
710710
Check out [jest-dom's documentation](https://github.com/gnapse/jest-dom#readme)
711711
for a full list of available matchers.
712712

713+
## Custom Queries
714+
715+
`dom-testing-library` exposes many of the helper functions that are used to implement the default queries. You can use the helpers to build custom queries. For example, the code below shows a way to override the default `testId` queries to use a different data-attribute. (Note: test files would import `test-utils.js` instead of using `dom-testing-library` directly).
716+
717+
```js
718+
// test-utils.js
719+
const domTestingLib = require('dom-testing-library')
720+
const {queryHelpers} = domTestingLib
721+
722+
export const queryByTestId = queryHelpers.queryByAttribute.bind(
723+
null,
724+
'data-test-id',
725+
)
726+
export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(
727+
null,
728+
'data-test-id',
729+
)
730+
731+
export function getAllByTestId(container, id, ...rest) {
732+
const els = queryAllByTestId(container, id, ...rest)
733+
if (!els.length) {
734+
throw queryHelpers.getElementError(
735+
`Unable to find an element by: [data-test-id="${id}"]`,
736+
container,
737+
)
738+
}
739+
return els
740+
}
741+
742+
export function getByTestId(...args) {
743+
return queryHelpers.firstResultOrNull(getAllByTestId, ...args)
744+
}
745+
746+
// re-export with overrides
747+
module.exports = {
748+
...domTestingLib,
749+
getByTestId,
750+
getAllByTestId,
751+
queryByTestId,
752+
queryAllByTestId,
753+
}
754+
```
755+
713756
### Using other assertion libraries
714757

715758
If you're not using jest, you may be able to find a similar set of custom

0 commit comments

Comments
 (0)