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

• @testing-library/react version: @testing-library/react@11.2.5
• Testing Framework and version: jest through react-scripts@4.0.2
• DOM Environment: jsdom@16.4.0 (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.

Reproduce the failing select interaction in the linked CodeSandbox, starting with /src/App.js and the role-based test using fireEvent.change. Trace the component's state update and rerender behavior, then verify that selecting OPTION1 causes the expected content to appear in the test.