Using fireEvent.change() on a select element fires the event handler, but doesn't update state.

[Taelkir]

• @testing-library/react version: @testing-library/[email protected]
• Testing Framework and version: jest through [email protected]
• DOM Environment: [email protected] (through react-scripts)
• node v12.18.0

Relevant code or config:

  const selectOne = screen.getByRole("combobox", { name: "My select" });
  fireEvent.change(selectOne, {
    target: { value: "OPTION1" }
  });

  expect(screen.getByText("OPTION1")).toBeInTheDocument();

What you did:

Attempting to change a <select> element and to check that different content is displayed based on what is selected. This works in a browser, but I can't get the test to recognise that.

What happened:

console.log() statements in the event handler of my component shows that the state is not changing; the fact these statements are logging at all show that the handler is being fired.

Reproduction:

Codesandbox here: https://codesandbox.io/s/react-testing-library-demo-forked-v09xi?file=/src/App.js

I've stripped down my TS project here to try and pin down the problem and am getting the same failing test behaviour.

Problem description:

I would expect the tests to change the app state in the same way as the browser does.

Suggested solution:

I'm not sure what's wrong; the event is happening, it's just the state then seems to reset to its original value.

[eps1lon]

Thanks for the report.

This is probably an old issue. It's caused due to the timing of when the state updater function runs.

If you capture the value, the test works as expected:

handleSelectChange = (event) => {
+   const value = event.target.value;
    this.setState(
      () => {
-       return { selectValue: event.target.value };
+       return { selectValue: value };
      },
      () => {
        console.log("State updated to: ", this.state.selectValue);
      }
    );
  };

[Taelkir]

Yep, that workaround is good for me in my project. Thanks!

[eps1lon]

Just to be clear: The code is working fine with manual testing in a browser. It only fails with our fireEvent.change implementation. So we do want to keep an eye on this bug.

[demo-Ghost]

Hi. I'm using react-select in my project and can't seem to find a way to capture the event properly. This happens due to the fact I don't have access to the event in the scope of the onChange function.

Is there another way for this to work, other than grabbing the event in the handleChange funtion?

Edit: I'm really new to react-testing-library, so if there is another way to override this behavior from fireEvent.change on a select component, please let me know. I do have to use react-select because of a restriction on the project, but any react-testing-library API will do.

Thanks in advance!

[demo-Ghost]

Imported the react-select-event library and it magically worked. It's also mentioned in the react testing library docs in the ecosystem section.

https://testing-library.com/docs/ecosystem-react-select-event

[fattylee2021]

@eps1lon thanks, this workaround works for me

[sanathp]

Using userEvent instead of fireEvent worked for me.