Assert toHaveBeenCalledWith with a React input components onChange handler

I am working on a test that checks that a React input component's onChange handler is called. I am using React 17, the react-testing-library, and jest.

const Input = ({ value, onChange }) => {    return <input type="text" value={value} onChange={onChange} />;  };  

test("calling onChange works", () => {    const value = "default value";    const handleChange = jest.fn();    handleChange.mockImplementation((e) =>      console.log("value is correct here", e.target.value)    );      const { container } = render(<Input value={value} onChange={handleChange} />);      const input = container.querySelector("input");    fireEvent.change(input, { target: { value: "new value" } });      // works    expect(handleChange).toHaveBeenCalled();      /// does not work    expect(handleChange).toHaveBeenCalledWith(      expect.objectContaining({        target: expect.objectContaining({          value: "new value"        })      })    );  });  

The first assertion, checking that the handler was called, works, but I am not able to assert that the event properly contains the new value. Interestingly, mocking the implementation shows that the correct value is being passed.

https://codesandbox.io/s/jest-testing-react-forked-7gytg?file=/src/components/Input.test.js:116-763

I am aware that it would be easier to test the parent form component, seeing if the new input is displayed; however, I would like to unit test this individual component if possible.

https://stackoverflow.com/questions/66809096/assert-tohavebeencalledwith-with-a-react-input-components-onchange-handler March 26, 2021 at 07:45AM