Closed
Description
react-testing-libraryversion: 6.1.2reactversion: 16.8.6nodeversion: 10.13.0npm(oryarn) version: 6.9
Relevant code or config:
import Input from '@material-ui/core/Input'
it.only('x - demo test', async () => {
let onChange = () => console.log('did change!!!')
const View = () => {
return (
<div>
<Input
id="login"
name="login"
onChange={onChange}
inputProps={{ 'data-testid': 'foo-inside' }}
data-testid="foo-outside"
/>
</div>
)
}
let sut = render(<View />)
let input1 = sut.container.querySelector('input[name="login"]')
fireEvent.change(input1, { target: { value: 'panda' } })
let input2 = sut.getByTestId('foo-inside')
fireEvent.change(input2, { target: { value: 'panda' } })
})What you did:
I've seen other issues with problems where Material UI, they seem to have solved the problem but I cannot get this to work.
I tried two ways to change the right DOM element. If I search wit wrong test-id (to get the layout) I get this:
<body>
<div>
<div>
<div
class="MuiInputBase-root-104 MuiInput-root-91 MuiInput-underline-95"
data-testid="foo-outside"
>
<input
class="MuiInputBase-input-114 MuiInput-input-99"
data-testid="foo-inside"
id="login"
name="login"
type="text"
value=""
/>
</div>
</div>
</div>
</body>Reproduction:
git clone https://github.com/fgarcia/react-test-issue
npm start
Problem description:
I have a controlled input element and I cannot capture the onChange event.
I would expect the let onChange function of the example to be called
Metadata
Metadata
Assignees
Labels
No labels