use-immer
use-immer copied to clipboard
immerjs
Passing event directly results in strange values inside state change function while running tests
I came across an issue when writing tests with testing library where text typed into an text area becomes completly messed up when directly passing the event into setter function created by useImmer:
export default function App() {
const [test, setTest] = useImmer({ text: "" });
return (
<div className="App">
<Form.Group controlId="formDescription">
<Form.Label>{"TestInput"}</Form.Label>
<Form.Control
as="textarea"
type="text"
placeholder={"Enter input"}
value={test.text}
onChange={(event) => {
const value = event.target.value;
setTest((draft) => {
draft.text = event.target.value; // wrong value for event.target.value inside test; gets really messed up
//draft.text = value; // works fine
});
}}
/>
</Form.Group>
</div>
);
}
On the other hand, when using useState the following works just fine:
export default function App() {
const [foo, setFoo] = useState({ text: "" });
return (
<div className="App">
<Form.Group controlId="formDescription">
<Form.Label>{"TestInput"}</Form.Label>
<Form.Control
as="textarea"
type="text"
placeholder={"Enter input"}
value={test.text}
onChange={(event) => {
setFoo((prevState) => {
const newState = { ...prevState };
newState.text = event.target.value; // works fine
return newState;
});
}}
/>
</Form.Group>
</div>
);
The test:
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";
import { screen } from "@testing-library/dom";
test("fill in", async () => {
const user = userEvent.setup({ document });
render(<App />);
const description = "This is a test description.";
await user.type(
screen.getByRole("textbox", { name: "TestInput" }),
description
);
expect(screen.getByText(description)).not.toBeNull();
});
Instead of This is a test description. the text area somehow contains Ti sats ecito. when running the test.
Using the text area manually in a browser seems to always work fine though. I am not sure if there can anything be done here and if this only happens in combination with testing library.
CSB: https://codesandbox.io/s/billowing-dew-0mdbjx
@stefan-fast mind sharing what the solution was?
wondering if it could be a similar issue as https://github.com/downshift-js/downshift/issues/1597: multiple relevant event handlers being triggered simultaneously.
