title: How do I mock a component that has a 'ref' with jest?
body: <p>I have some code like:</p>
  
  <pre><code>import { GoogleMap } from 'react-google-maps';
  
  const GoogleMapContainer = () =&gt; {
      const zoomToBounds = React.useCallback(
          (map): void =&gt; map &amp;&amp; bounds &amp;&amp; map.fitBounds(bounds),
          [bounds]
      );
  
  
      &lt;GoogleMap ref={zoomToBounds}&gt;
          ...
      &lt;/GoogleMap&gt;
  }
  </code></pre>
  
  <p>and am trying to mock the <code>GoogleMap</code> with jest when I am testing <code>GoogleMapContainer</code></p>
  
  <pre><code>jest.mock('react-google-maps', () =&gt; ({
        GoogleMap: (props) =&gt; &lt;div&gt;{props.children}&lt;/div&gt;,
  }));
  </code></pre>
  
  <p>However, I get an error like:</p>
  
  <pre><code>    Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
  </code></pre>
  
  <p>I am unable to use <code>forwardRef</code> because jest complains about using functions from outside the scope. I get the same error if I try to create mock class-based component for GoogleMap.</p>
  
  <p>How do I get around the <code>ref</code> error?</p>