title: Why does useParams during test return undefined in test env with wrapper?
body: <p>I have seen this in 2 different code bases now and am stumped because it works fine in the actual browser but not the tests:  if a component uses the <code>useParams</code> hook, the hook throws an error in the test:</p>
  
  <blockquote>
    <p>Error: Uncaught [TypeError: Cannot destructure property <code>accountId</code> of 'undefined' or 'null'.]</p>
  </blockquote>
  
  <p>I am using React Functional Component, React Testing Library and React-Router:</p>
  
  <p>// component:</p>
  
  <pre><code>const Overview: FC = () =&gt; {
    const location = useLocation();
    console.log(location) // see below
    const { accountId } = useParams();
    console.log(accountId) // see below
  
    ... rest
  }
  </code></pre>
  
  <p>the console logs appear to have found the params properly:</p>
  
  <blockquote>
    <p>console.log src/screens/Overview/index.tsx:66
          accountId:  nodata</p>
    
    <p>console.log src/screens/Overview/index.tsx:64
          location:  { pathname: '/mix/overview/nodata',
            search: '',
            hash: '',
            state: undefined,
            key: 'bn6zvv' }</p>
  </blockquote>
  
  <p>// testing setup with wrapper as recommended in the <a href="https://testing-library.com/docs/example-react-router#reducing-boilerplate" rel="noreferrer">RTL docs</a></p>
  
  <pre><code>
  function renderWithProviders(
    ui,
    {
      route = '/',
      params = routes.root, 
      history = createMemoryHistory({ initialEntries: [route] }),
    } = {},
    apolloMocks
  ) {
    console.log("route:", route) // see below
    console.log("params:", params) // see below
    return {
      ...render(
        &lt;Provider store={mockProviderStore}&gt;
          &lt;Router history={history}&gt;
            &lt;MockedProvider mocks={apolloMocks}&gt;
              &lt;Route path={params}&gt; // tried to set path to "params" not "route" so the slug of /url/:accountId is properly set
               {ui}
              &lt;/Route&gt;
            &lt;/MockedProvider&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      ),
      history,
    };
  }
  </code></pre>
  
  <p>the result of the console log in the test-utils file looks correct:</p>
  
  <blockquote>
    <p>console.log src/test-utils/index.js:19
          route: /mix/overview/nodata</p>
    
    <p>console.log src/test-utils/index.js:20
          params: /mix/overview/:accountId</p>
  </blockquote>
  
  <p>// test itself</p>
  
  <pre><code>test('it works', async () =&gt; {
      const { findByText } = renderWithProviders(&lt;Overview /&gt;, {
        route: routes.overview('1234567890'), // =&gt; path/1234567890
        params: routes.overview(), // =&gt; path/:accountId
      });
  
      await findByText('loading configs...');
  
      await waitForElementToBeRemoved(() =&gt; getByText('loading configs...'));
  
      await findByText('View your stuff now. It works!');
    });
  </code></pre>
  
  <p>I am trying the <a href="https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning" rel="noreferrer">recommended work around</a> from #kentdodds to use <code>await</code> in the tests which lets state changes to settle correctly.</p>
  
  <p>What is it about the React-Router hook which isn't picking up the route params correctly?</p>