title: Mocking react-router-dom useHistory and other hooks with jest
body: <p>I have a CRA and Typescript (.tsx) application. I'm trying to write a test for a component that needs <code>useHistory</code> and <code>useRouteMatch</code> but it return the error: <code>TypeError: Cannot read property 'history' of undefined</code>.</p>
  
  <p><strong>The component:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const SidebarTreeNav: React.FC&lt;Props&gt; = ( { tree, expanded } ) =&gt; {
    const history = useHistory();
    let { url } = useRouteMatch();
  
    const handleClick = useCallback(
      ( path: string ) =&gt; history.push(`${ url }/${ path }`),
      [ history ]);
  
    return (
      &lt;SidebarTreeNavView expanded={ expanded ?? [ '0' ] }&gt;
        &lt;SidebarTreeNavBlock handleClick={ handleClick } tree={ tree } node={ 0 } /&gt;
      &lt;/SidebarTreeNavView&gt;
    );
  };
  
  export default SidebarTreeNav;
  </code></pre>
  
  <p><strong>The Test:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>  beforeEach(() =&gt; {
      jest.mock('react-router-dom', () =&gt; {
        const originalModule = jest.requireActual('react-router-dom');
  
        return {
          __esModule: true,
          ...originalModule,
          useRouteMatch: { url: '/entry' },
          useHistory: jest.fn(),
        };
      });
  
      shallow = createShallow();
      wrapper = shallow(&lt;SidebarTreeNav tree={ [] } /&gt;);
    });
  
    it('&lt;SidebarTreeNav /&gt; should be defined', () =&gt; {
      expect(wrapper).toBeDefined();
    });
  
  </code></pre>