testing-library / testing-library/dom-testing-library
`getByRole('search')` does not find `<search />`
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
@testing-library/domversion: Unknown
I rannpm list | grep @testling-libraryand I didn't get@testing-library/dom:
├── @testing-library/jest-dom@6.5.0
├── @testing-library/react@15.0.6
├── @testing-library/user-event@14.6.1
- Testing Framework and version: Vitest 3.1.3
- DOM Environment: jsdom 22.1.0
Relevant code or config:
it('contains search role', async () => {
render(<search />);
expect(screen.getByRole('search')).toBeInTheDocument();
});
What you did:
I searched the search element by role search and expected it will be found. As it seems the proper role for that element.
What happened:
My test failed:
TestingLibraryElementError: Unable to find an element with the role "search"
There are no available roles.
Ignored nodes: comments, script, style
<body>
<div>
<search />
</div>
</body>
❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19
❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ test.spec.tsx:30:19
28| it('contains search role', async () => {
29| render(<search />);
30| expect(screen.getByRole('search', { hidden: true })).toBeInTheDocument();
| ^
31| });
Reproduction:
https://stackblitz.com/edit/dtl-template-ryhamkss?file=src%2Fmain.test.ts
Problem description:
The search element is not found by getByRole('search'). I was expecting the role search was okay for that element since that's mentioned in this table.
Suggested solution:
Maybe a change like the one done to solve this issue could be the answer.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure in src/main.test.ts using the linked StackBlitz example. Then trace how getByRole resolves the HTML
element, add regression coverage for the expected search role, and run the relevant test suite to confirm the query succeeds.Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100