React Input Onchange Simulation Not Updating Value Using Jest And Enzyme

I have a functional component as below const Input = () => { const [value, updateValue] = useState(''); return (

Solution 1:

After component 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

constevent = { 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.

Solution 2:

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

Share