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 #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.