title: Create manual mock for @material-ui withStyles in React with Jest
body: <p>I am trying to create manual mocks for the <code>@material-ui/core/styles</code> module, which exports the HOC called <code>withStyles</code>. </p>
  
  <p>Using the inline mock with <code>jest.mock</code> works perfectly, but when I try to move this logic into sharable <code>__mocks__</code> folder, it does not work anymore. </p>
  
  <p>I removed from the file being tested all the unecessary code, just keeping the two lines creating the issues:</p>
  
  <pre><code>import { withStyles } from '@material-ui/core/styles';
  
  console.log('loaded styles:', withStyles);
  
  export default 'hello';
  </code></pre>
  
  <p>And the test simplified as well, just to see if the mock is working, is the following:</p>
  
  <pre><code>import test from '../test';
  console.log(test);
  </code></pre>
  
  <p>What I have tried is to create a <code>__mocks__</code> folder in the root of the project, where I have the <code>node_modules</code> folder. </p>
  
  <p>There I created a first folder called <code>@material-ui</code> and inside it another folder called <code>core</code>. 
  Inside this folder I have a file called <code>styles.js</code> with the following code:</p>
  
  <pre><code>export const withStyles = 'hello world';
  </code></pre>
  
  <p>So the structure looks like:</p>
  
  <pre><code>- __mocks__
    - @material-ui
      - core
        - styles.js
  - node_modules
  </code></pre>
  
  <p>This is the code which works, with the mock defined inside the same testing file:</p>
  
  <pre><code>jest.mock('@material-ui/core/styles', () =&gt; ({
    withStyles: () =&gt; Component =&gt; props =&gt; (
      &lt;Component
        classes=""
        {...props}
      /&gt;
    ),
  }));
  </code></pre>
  
  <p>What is happening with the <code>__mocks__</code> folder is that, if I do not call any </p>
  
  <pre><code>jest.mock('@material-ui/core/styles');
  </code></pre>
  
  <p>inside my test file, it uses the real <code>withStyles</code>, so the real module.
  No mock at all is being used.</p>
  
  <p>If I use the:</p>
  
  <pre><code>jest.mock('@material-ui/core/styles');
  </code></pre>
  
  <p>It uses an automatic mock autogenerated by jest (or it looks so), skipping the one I define above. </p>
  
  <p>Just a note about packages, I used <code>CRA</code> for bootstrapping the app and the <code>jest</code> version I currently have is the 20, with the <code>react-scripts</code> version 1.0.17</p>
  
  <p>Thanks to you all for you the help! </p>