title: Enzyme & React router: How to shallow render a component with useHistory
body: <p>What I've been trying is to render a component with <code>shallow</code>, which is provided by <code>enzyme</code>.</p>
  
  <p>The component is using <code>useHistory</code> from <code>react-router-dom</code>.</p>
  
  <pre><code>const baseMatch: match&lt;{ id: string }&gt; = { /* path, url, params */};
  const location = createLocation(baseMatch.url);
  
  describe('MyComponent', () =&gt; {
    const baseProps = {
      history: createMemoryHistory(),
      location: createLocation(baseMatch.url),
      match: baseMatch
    };
  
    beforeEach(() =&gt; {
      jest.mock('react-router-dom', () =&gt; ({
        useHistory: jest.fn()
      }));
    });
  
    afterEach(() =&gt; { jest.clearAllMocks() });
  
    it('renders blah blah', () =&gt; {
      const wrapper = shallow(&lt;MyComponent {...baseProps} /&gt;);
      // testing MyComponent here...
    });
  </code></pre>
  
  <p>I referred to <a href="https://stackoverflow.com/questions/58392815/how-to-mock-usehistory-hook-in-jest">this post</a>, and put <code>jest.mock</code> in the same way.</p>
  
  <p>However, this results in <code>TypeError: Cannot read property 'history' of undefined</code>.</p>
  
  <p>The console says:</p>
  
  <pre><code>MyComponent › renders blah blah
  
      TypeError: Cannot read property 'history' of undefined
  
        24 | const MyComponent = (props: IProps) =&gt; {
        25 |   console.log('useHistory', useHistory);
      &gt; 26 |   let history = useHistory();
  </code></pre>
  
  <p>Strangely, the <code>console.log</code> in line 25 above prints the implementation of <code>useHistory</code> (In other words, it's not undefined).</p>
  
  <p>Clearly, <code>useHistory</code> isn't mocked.
  I suspect that <code>useHistory</code> can't be mocked with <code>shallow</code> (In the post above, the poster was using <code>mount()</code>).</p>
  
  <p>However, I'm not 100% sure because I can't find if <code>shallow</code> is compatible with <code>useHistory</code> or not from the docs of <code>enzyme</code> and <code>react-router</code>.</p>
  
  <p>Is it possible to use <code>shallow</code> with <code>useHistory</code>? Any advice will be appreciated.</p>