title: How to mock a React Component in the __mocks__ directory with jest?
body: <p>I have been trying to extract a common mocked component to the <strong>mocks</strong> folder without success. I am only able to do it with regular JS files, but not with Components.</p>
  <p>If I have a module getList as so:</p>
  <pre><code>    export const getBigger = (a, b) =&gt; {
         return a &gt;= b ? a : b;
      };
  </code></pre>
  <p>I can use it inside my component as so:</p>
  <pre><code>export default function App() {
    const bigger = getBigger(&quot;a&quot;, &quot;b&quot;);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Bigger bigger={bigger} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>And I can put the pure js function inside the <strong>mocks</strong> folder</p>
  <pre><code>export const getBigger = jest.fn((p1, p2) =&gt; false);
  </code></pre>
  <p>And I can import it in my test without any problems:</p>
  <pre><code>import { getBigger as mockedGetBigger } from '../utils';
  jest.mock('../utils');
  </code></pre>
  <p>And do my assertions:</p>
  <pre><code>expect(mockedGetBigger).toHaveBeenCalledTimes(1);
  expect(mockedGetBigger).toHaveBeenCalledWith('a', 'b');
  </code></pre>
  <p>But I can't do the same if I want to mock the Bigger Component, it only works as so:</p>
  <pre><code>jest.mock('../Bigger', () =&gt; ({
     Bigger: jest.fn(() =&gt; &lt;&gt;Mocked Bigger Component&lt;/&gt;),
  }));
  </code></pre>
  <p>But if I extract the function to the <strong>mocks</strong> folder and I try to use it just as the simple js function I get an error:</p>
  <pre><code>import React from 'react';
  export const Bigger = jest.fn(() =&gt; &lt;&gt;Mocked Bigger Image&lt;/&gt;);
  </code></pre>
  <p>And in the test import it and use it as:</p>
  <pre><code>import { Bigger as MockedBigger } from '../Bigger';
  jest.mock('../Bigger');
  </code></pre>
  <p>I get the following error:</p>
  <pre><code>Error: Uncaught [Error: Bigger(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
  </code></pre>
  <p>I am not sure what the difference is when jest is importing and mocking in the same step or going to look for the mock function to the <strong>mocks</strong> folder.</p>
  <p>Any ideas?
  Somebody else complained about it here: <a href="https://github.com/facebook/jest/issues/6935" rel="nofollow noreferrer">https://github.com/facebook/jest/issues/6935</a></p>
  <p>I made a simple codesandbox to help to understand the problem: <a href="https://codesandbox.io/s/mocks-folder-example-oxht3?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/mocks-folder-example-oxht3?file=/src/index.js</a></p>
  <p>And here is the guide from jest to put your mocks in the <code>__mocks__</code> folder</p>