title: Is there a way to unit test an innaccessible callback function that is called from a child React component using jest
body: <p>I am unit testing a React 16 functional component that defines a callback and passes it as a property down to the next component to be invoked when a click event fires.  </p>
  
  <pre><code>import React from 'react'
  
  function OuterComponent() {
  
    const handleClick = useCallback(() =&gt; {
      openDialog() // &lt;--- This code is inaccessible from my "OuterComponent.test.js" unit test 
    }
  
    return &lt;MyDialog clickHandler={handleClick} /&gt;
  }
  export default OuterComponent
  </code></pre>
  
  <p>I am seeking 100% test coverage and would like to mock all other components/functions using jest that are not part of the "OuterComponent" component.  </p>
  
  <p>The problem I am having is that I can't seem to mock the <strong>MyDialog</strong> component in order to have it trigger the <strong>handleClick</strong> function. </p>
  
  <p>I also tried to mock the component using this snippet but it still seems to try to load all the imports from <strong>MyDialog</strong></p>
  
  <pre><code>jest.doMock('components/MyDialog', () =&gt; {
      return () =&gt; () =&gt; &lt;div /&gt;
  })
  //... other mocks along with **openDialog**
  
  //...and in my describe/it...
  MyDialog.mockImplementation(() =&gt; {})
  
  OuterComponent().handleClick()
  expect(openDialog).toHaveBeenCalled()
  </code></pre>
  
  <p>The hope here was that I could render an empty div for <strong>MyDialog</strong> and just simply call the <strong>handleClick</strong> function to test it.  Does anyone know what I could be doing wrong or have any other ideas of how to test it?</p>