getByRole('textbox') cannot find <input /> html element in v9.5.0 #606
Description
@testing-library/reactversion: 9.5.0reactversion: 16.12.0nodeversion: 10.16.0yarnversion: 1.17.3
Relevant code or config:
const inputProps = {
name: 'test',
label: 'Enter your name',
}
test('You should be able to type in the input and see the text', () => {
const textToType = 'Hello, World!'
const { getByRole } = render(<Input {...inputProps} />)
userEvent.type(getByRole('textbox'), textToType)
expect(getByRole('textbox')).toHaveAttribute('value', textToType)
})What you did:
After upgrading to 9.5.0, tests using `getByRole('textbox') are unable to locate the html element.
What happened:
Unable to find an accessible element with the role "textbox"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div
class="Inputstyles__Field-ml9srx-3 gUrUvl"
>
<div
class="Inputstyles__InputWrapper-ml9srx-2 bKKQul"
>
<input
class="Inputstyles__StyledInput-ml9srx-1 ezsCsI"
id="ECJHn78Lr"
name="test"
value=""
/>
<label
class="Inputstyles__StyledLabel-ml9srx-0 VKxRB"
for="ECJHn78Lr"
>
Enter your name
</label>
</div>
</div>
</div>
</body>