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

Problem here is TextField is an abstraction in MaterialUI. It consists of FormControl, Label and Input. Clean way of solving this problem is:

• First, add InputProps on your TextField, with data-testid attribute.

// YourComponent.js

 setContent(event.target.value)}
  id="content"
  inputProps={{ "data-testid": "content-input" }}
  value={content}
  label="Content"
/>

• Then simply query using this ID.

// YourComponent.test.js

const contentInput = getByTestId("content-input");
fireEvent.change(contentInput, {
  target: { value: "new content" }
});

// and then assert stuff in here