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

[Taelkir]

• @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.

[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.

[davelosert]

So I am having a (maybe) similar issue both with fireEvent as well as with userEvent (if it is something else I am happy to open another ticket 🙂 )

When mocking out the callback to an onChange-handler that receives the event as first argument, the event.target seems to be reset to the actual input field after the onChange call occurs but before fireEvent returns.

See this code example:

import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

it("works on normal input.", async () => {
  const callback = jest.fn();

  render(
    <input
      type="text"
      value="2"
      onChange={(event) => {
        // Here, event.target.value is "29" as expected
        console.log(`Value in Handler: ${event.target.value}`);
        callback(event);
      }}
    />
  );

  const inputElement = screen.getByDisplayValue("2");

  userEvent.type(inputElement, "9");

  const event = callback.mock.calls[0][0];

  // Here, event.target.value is only "2"
  console.log(`Value after userEvent.type returns: ${event.target.value}`);

  expect(callback).toHaveBeenCalled();
  expect(event.target.value).toBe("29");
});

});

https://codesandbox.io/s/react-testing-library-demo-forked-m8wgx?file=/src/__tests__/App.js

Within the callback itself, I still have the new value. But in the test assertion, it is the old value.
I guess this has something to do with how react handles events and I am happy to investiage why this happens - but I thought I'd asked first if this is a known issue.

[gugu]

Same error, happened after upgrade from react 17 to react 18.
adding {delay: 0} fixed the problem and I have no idea, why

[gugu]

Oh, I found, why. Both of us are missing await after userEvent.type

[eps1lon]

For issues with user-event please file an issue with testing-library/user-event. This issue is just about fireEvent.change.

[gugu]

This issue is because issue author forgot to add await in their code (me as well)

…

On Mon, Jun 6, 2022, at 00:01, Sebastian Silbermann wrote: For issues with `user-event` please file an issue with `testing-library/user-event`. This issue is just about `fireEvent.change`. — Reply to this email directly, view it on GitHub <#908 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAASLIMXPKBAFYQ5FI35U63VNUITVANCNFSM44IFHHRQ>. You are receiving this because you commented.Message ID: ***@***.***>

[JuanjoOrt]

@gugu can you share in with part we have to put the await?

I have the same issue of author.

Thanks

[gugu]

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

…

On Tue, Jun 14, 2022, at 11:18, Juanjo Ortiz wrote: @gugu <https://github.com/gugu> can you share in with part we have to put the await? I have the same issue of author. Thanks — Reply to this email directly, view it on GitHub <#908 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAASLIKU3V43BIIYPQXWPIDVPA54LANCNFSM44IFHHRQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>