title: React Mock Testing useNavigate
body: <p>I have looked at the following posts and am still running into an issue with following redirects with useNavigate in React.</p>
  <p><a href="https://stackoverflow.com/questions/66284286/react-jest-mock-usenavigate">react jest mock useNavigate()</a></p>
  <p><a href="https://github.com/remix-run/react-router/issues/7811" rel="nofollow noreferrer">https://github.com/remix-run/react-router/issues/7811</a></p>
  <p>Create Post Snippet</p>
  <pre><code>const result = await dispatch(postCreateView(postObj))
  if(result){
       nav('/posts')
  }
  </code></pre>
  <p>Test Setup</p>
  <pre><code>import {screen, render, fireEvent} from '@testing-library/react'
  import { MockComponent } from '../../testMockComponentWrapper'
  import { PostCreate } from '../PostCreate'
  
  const mockedUsedNavigate = jest.fn();
  
  jest.mock('react-router-dom', () =&gt; ({
      ...jest.requireActual('react-router-dom'),
     useNavigate: () =&gt; mockedUsedNavigate,
   }));
  
  describe('Post Create', () =&gt; {
  
      it('successful post with redirect', async () =&gt; {
          const {container} = render(&lt;MockComponent&gt;&lt;PostCreate/&gt;&lt;/MockComponent&gt;)
          const titleElement = screen.getByPlaceholderText(/enter title/i)
          const descriptionElement = screen.getByPlaceholderText(/enter description/i)
          const buttonElement = screen.getByRole('button')
  
          fireEvent.change(titleElement, {target: {value: 'A New title from Testing'}})
          fireEvent.change(descriptionElement, {target: {value: 'A New description from Testing'}})
          fireEvent.click(buttonElement)
          
          expect(mockedUsedNavigate).toHaveBeenCalledTimes(1);
          
      })
  
  })
  </code></pre>
  <p>MockedComponent:</p>
  <pre><code>export const MockComponent = (props) =&gt; {
      return(
          &lt;BrowserRouter&gt;
              &lt;Provider store={store}&gt;
                  {props.children}
              &lt;/Provider&gt;
          &lt;/BrowserRouter&gt;
      )
  }
  </code></pre>
  <p>I have also tried</p>
  <pre><code>export const MockComponent = (props) =&gt; {
      return(
          &lt;Router&gt;
              &lt;Provider store={store}&gt;
                  {props.children}
              &lt;/Provider&gt;
          &lt;/Router&gt;
      )
  }
  </code></pre>
  <p>BrowserRouter gives the error:</p>
  <pre><code>TypeError: Cannot read property 'pathname' of undefined
  </code></pre>
  <p>With Router I the Error I'm getting:</p>
  <pre><code>Expected number of calls: 1
  Received number of calls: 0
  </code></pre>
  <p>I would have thought that the number of calls would have been 1 since useNavigate would have been handled by jest, but that doesn't seem to be the case.</p>
  <p>Versions I'm using:</p>
  <pre><code>&quot;@testing-library/jest-dom&quot;: &quot;^5.16.1&quot;,
  &quot;@testing-library/react&quot;: &quot;^12.1.2&quot;,
  &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
  &quot;react&quot;: &quot;^17.0.2&quot;,
  &quot;react-router-dom&quot;: &quot;^6.2.1&quot;,
  </code></pre>
  <p>Just an FYI, the following does work and tests the dispatch method for react-redux:</p>
  <pre><code>const mockDispatch = jest.fn();
  
  jest.mock('react-redux', () =&gt; ({
      ...jest.requireActual('react-redux'),
      useDispatch: () =&gt; mockDispatch
  }))
  
  // In the test
  await expect(mockDispatch).toHaveBeenCalledTimes(1);
  </code></pre>
  <p>I would appreciate anyone's assistance with this.    If there's a better place to post this question or SO guidelines I have missed, I apologize in advance and guidance would be appreciated.  Thank you in advance.</p>