testing-library / testing-library/react-testing-library
findByRole doesn't find the role
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 19.7k
- Forks
- 1.2k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 1
Description
@testing-library/reactversion: 14.1.0- Testing Framework and version:
- Jest: 29.5.0
- DOM Environment:
Relevant code or config:
What you did:
I just upgraded the testing-library from the version 13 to 14 and somehow the function findByRole doesn't find my component but in the error console it shows it.
I tried to increase the timeout, I also tried a regexp for the name. It doesn't work.
I have also taken a look at https://github.com/testing-library/react-testing-library/issues/835 but I'm not using a fancy role here. So I guess my issue is somewhere else.
As a side note, the role attributed previously was button and now it is combobox. I don't know if it's really important to notice it.
What happened:
Here the result shown in the console once the test is crashing.
Unable to find role="combobox" and name "Ernie Variable 1"
Ignored nodes: comments, script, style
<body
style=""
>
<div>
<div
class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
data-testid="plugin-kind-select"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
aria-controls=":r3:"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r2:"
class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
id=":r2:"
role="combobox"
tabindex="0"
>
Ernie Variable 1
</div>
<input
aria-hidden="true"
aria-invalid="false"
class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
tabindex="-1"
value="ErnieVariable1"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-ihdtdm"
>
<span
class="notranslate"
>
</span>
</legend>
</fieldset>
</div>
</div>
</div>
</body>
But we clearly see that the component with the role combobox and the name Ernie Variable 1 is there. I know the component is loaded asynchronously, so this combobox with the accurate name is not present immediately but even after increasing the timeout it is still crashing.
So I'm not sure what is wrong in my component or even in my usage of the testing-library.
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
Start with the linked PluginKindSelect.test.tsx lines 54-55 and reproduce the failure using the reported @testing-library/react and Jest versions. Compare the asynchronous query with the rendered role, accessible name, and version change; done means the cause is identified and a focused regression test or scoped fix is established.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100