title: Assert toHaveBeenCalledWith with a React input components onChange handler
body: <p>I am working on a test that checks that a React input component's <code>onChange</code> handler is called. I am using React 17, the react-testing-library, and jest.</p>
  <pre class="lang-js prettyprint-override"><code>const Input = ({ value, onChange }) =&gt; {
    return &lt;input type=&quot;text&quot; value={value} onChange={onChange} /&gt;;
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>test(&quot;calling onChange works&quot;, () =&gt; {
    const value = &quot;default value&quot;;
    const handleChange = jest.fn();
    handleChange.mockImplementation((e) =&gt;
      console.log(&quot;value is correct here&quot;, e.target.value)
    );
  
    const { container } = render(&lt;Input value={value} onChange={handleChange} /&gt;);
  
    const input = container.querySelector(&quot;input&quot;);
    fireEvent.change(input, { target: { value: &quot;new value&quot; } });
  
    // works
    expect(handleChange).toHaveBeenCalled();
  
    /// does not work
    expect(handleChange).toHaveBeenCalledWith(
      expect.objectContaining({
        target: expect.objectContaining({
          value: &quot;new value&quot;
        })
      })
    );
  });
  </code></pre>
  <p>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.</p>
  <p><a href="https://codesandbox.io/s/jest-testing-react-forked-7gytg?file=/src/components/Input.test.js:116-763" rel="nofollow noreferrer">https://codesandbox.io/s/jest-testing-react-forked-7gytg?file=/src/components/Input.test.js:116-763</a></p>
  <p><strong>I am aware that it would be easier to test the parent form component, seeing if the new input is displayed</strong>; however, I would like to unit test this individual component if possible.</p>