title: How to mock Material-UI withWidth HOC
body: <p>Suppose I have a component which is wrapped in Material-UI's withWidth HOC. How do you mock withWidth's isWidthUp function using jest to return a predetermined bool? </p>
  
  <p><strong>SUT</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
  
  class ComponentWithWidth extends Component {
  
      render() {
          const { width } = this.props;
  
          return isWidthUp('md', width)
              ? &lt;p&gt;above md&lt;/p&gt;
              : &lt;p&gt;below md&lt;/p&gt;;
      }
  }
  
  export default withWidth()(ComponentWithWidth);
  </code></pre>
  
  <p><strong>What I have tried</strong></p>
  
  <p><strong>Attempt 1</strong></p>
  
  <pre><code>import React from 'react';
  import { configure, mount } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import ComponentWithWidth from '../ComponentWithWidth';
  import { isWidthUp } from '@material-ui/core/withWidth';
  
  configure({ adapter: new Adapter() });
  
  jest.mock('@material-ui/core/withWidth');
  
  describe('ComponentWithWidth', () =&gt; {
  
      it('Should render', () =&gt; {
  
          isWidthUp = jest.fn().mockReturnValue(true);
  
          const el = mount(&lt;ComponentWithWidth /&gt;);
      });
  });
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <pre><code>TypeError: (0 , _withWidth.default)(...) is not a function
  </code></pre>
  
  <p><strong>Attempt 2</strong></p>
  
  <pre><code>import React from 'react';
  import { configure, mount } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import ComponentWithWidth from '../ComponentWithWidth';
  import withWidth from '@material-ui/core/withWidth';
  
  configure({ adapter: new Adapter() });
  
  describe('ComponentWithWidth', () =&gt; {
  
      it('Should render', () =&gt; {
  
          withWidth.isWidthUp = jest.fn().mockReturnValue(false);
  
          const el = mount(&lt;ComponentWithWidth /&gt;);
      });
  });
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>The component disregards the widthWidth.isWidthUp mock return value.</p>