React testing library: The given element does not have a value setter when fireEvent change on input form

Question

I want to change the value of material UI TextField in react testing library. I already set up the data-testid. Then using getByTestId i picked up the

Answer 1

the issue here is when we use Material UI, it renders the TextField component having one of the elements inside it as an input field. And only "input" has getter and setter on it. So after you got the TextField, you have to get the "input" element of your TextField using querySelector() of your DOM object.

const field = getByTestId('input-email').querySelector('input');
// now fire your event
fireEvent.change(field, { target: { value: 'abcd@xyz.com' } });