I have a functional ponent as below

const Input = () => {
  const [value, updateValue] = useState("");
  return (
    <input
      type="text"
      id="input"
      value={value}
      onChange={(e) => {
        updateValue(e.target.value);
      }}
    />
  );
};

export default Input;

and test as below

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(input.prop("value")).toBe("Q");

the problem is that simulation of the event is not updating state. I tried wrapper.update() as well but it is not working.

you can run test here

I have a functional ponent as below

const Input = () => {
  const [value, updateValue] = useState("");
  return (
    <input
      type="text"
      id="input"
      value={value}
      onChange={(e) => {
        updateValue(e.target.value);
      }}
    />
  );
};

export default Input;

and test as below

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(input.prop("value")).toBe("Q");

the problem is that simulation of the event is not updating state. I tried wrapper.update() as well but it is not working.

you can run test here

• javascript
• reactjs
• jestjs
• single-page-application
• enzyme

• Besides the @skyboyer answer, you should also have a look at testing-library./docs/react-testing-library/intro which simplifies very much the testing of ponents. – Gabriele Petrioli Commented Sep 27, 2019 at 7:48

2 Answers 2

After ponent updated your input variable still points on old wrapper.

Wrappers(except root one) are immutable so you need to .find() element again.

So if you

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(wrapper.find("input").prop("value")).toBe("Q");

you will get it passed.

PS probably it's safer always avoid using intermediate variables while testing with Enzyme.

For those who got multiple inputs just like @NishamMahsin's case. I had the same issue and found the working solution from wrapper not updated after simulate('change'). #1999

In short:

.simulate('change', {target: {name: 'inputFirstName', value: 'value'}})

It took me quite a long time on this, so hope it helps someone here...