title: How to test react components props (expect component to be called with)
body: <p>I need to test that a react component is called with <code>opened={true}</code> prop after an button click is fired. I am using <code>testing-library</code> ( <code>testing-library/react</code> + <code>testing-library/jest-dom</code>).</p>
  <p>I mocked the Component using something like</p>
  <pre><code>import Component from &quot;./path-to-file/component-name&quot;
  ...
  jest.mock(&quot;./path-to-file/component-name&quot;, () =&gt; {
    return jest.fn().mockImplementation(() =&gt; {
      return null
    })
  })
  </code></pre>
  <p>I first tried with:</p>
  <pre><code>expect(Component).toBeCalledWith(expect.objectContaining({&quot;opened&quot;: true}))
  expect(Component).toHaveBeenCalledWith(expect.objectContaining({&quot;opened&quot;: true}))
  expect(Component).toHaveBeenLastCalledWith(expect.objectContaining({&quot;opened&quot;: true}))
  </code></pre>
  <p>but I got <code>Error: expect(jest.fn()).toBeCalledWith(...expected)</code>.</p>
  <p>Same went for <code>expect.objectContaining({&quot;opened&quot;: expect.anything()})</code></p>
  <p><a href="https://i.stack.imgur.com/pqJJI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pqJJI.png" alt="expect.objectContaining({&quot;opened&quot;: expect.anything()})" /></a></p>
  <p>And even for <code>expect(Component).toBeCalledWith(expect.anything())</code></p>
  <p><a href="https://i.stack.imgur.com/IuxFM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IuxFM.png" alt="expect.anything()" /></a></p>
  <p>And the difference is empty array:
  <a href="https://i.stack.imgur.com/jtclE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jtclE.png" alt="empty array" /></a></p>
  <p>I also tried with <code>expect(ChartMenu.mock).toBeCalledWith(expect.anything())</code>. I got a different error but still not working (this time the error was <code>Error: expect(received).toBeCalledWith(...expected)</code> + <code>Matcher error: received value must be a mock or spy function</code>)
  <a href="https://i.stack.imgur.com/uVJ2i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVJ2i.png" alt="mock" /></a></p>
  <p>Thank you in advice!</p>
  <p><strong>EDIT</strong>: here is a simplified version of the component I want to test:</p>
  <pre><code>const Component = () =&gt; {
    const [chartMenuOpened, setChartMenuOpened] = useState(false)
    return (
        &lt;Flex&gt;
          &lt;EllipseIcon onClick={() =&gt; setChartMenuOpened(true)}&gt;
            +
          &lt;/EllipseIcon&gt;
          &lt;ChartMenu
            opened={chartMenuOpened}
            close={() =&gt; setChartMenuOpened(false)}
          /&gt;
        &lt;/Flex&gt;
    )
  }
  </code></pre>
  <p>Basically I want to make sure that when the <code>+</code> icon is clicked the menu will be opened (or called with open value). The issue is that I cannot render ChartMenu because it needs multiple props and redux state.</p>
  <p>I was able in the end to mock useState in order to check that the setState was properly called from the icon component (in order to make sure there won't be future changes on the component that will break this <a href="https://stackoverflow.com/questions/57025753/how-to-set-initial-state-for-usestate-hook-in-jest-and-enzyme">using this post</a>).</p>
  <p>But I would still really appreciate an answer to the question: if there is any way to create a spy or something similar on a react component and check the props it was called with? Mostly because this was a rather simple example and I only have one state. But this might not always be the case. Or any good idea on how to properly test this kind if interaction would be really appeciated.</p>