title: React testing library, dynamic import & React Router DOM always render the not-found component
body: <p>I am having some trouble to test simple navigation,<br />
  I have a react app using react-router-dom and the App component is wrapped with suspense.<br />
  I also import my components dynamically to be able to code split.</p>
  <p>For some reason, in the unit test when I trigger a click on the nav About link from the homepage.<br />
  it always renders the 404 NotFound components and never the about Component, which exists<br />
  What do I do wrong?</p>
  <p>Main.js</p>
  <pre><code>const Main = () =&gt; &lt;h1&gt;Home page&lt;/h1&gt;;
  </code></pre>
  <p>About.js</p>
  <pre><code>const About = () =&gt; &lt;h1&gt;About page&lt;/h1&gt;;
  </code></pre>
  <p>NotFound.js</p>
  <pre><code>const NotFound = () =&gt; &lt;div&gt;404 this page does not exist&lt;/div&gt;;
  </code></pre>
  <p>Nav.js</p>
  <pre><code>const Nav = () =&gt; (
    &lt;div className=&quot;dummy-nav&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>App.js</p>
  <pre><code>import React, { Component, Suspense, lazy } from &quot;react&quot;;
  import { Switch, Route } from &quot;react-router-dom&quot;;
  import Nav from &quot;./Nav&quot;;
  
   const Main = lazy(() =&gt; import(/* webpackChunkName: &quot;Main&quot; */ &quot;./Main&quot;));
   const About = lazy(() =&gt; import(/* webpackChunkName: &quot;About&quot; */ &quot;./About&quot;));
   const NotFound = lazy(() =&gt;
    import(/* webpackChunkName: &quot;About&quot; */ &quot;./NotFound&quot;)
   );
  
  class App extends Component {
    render() {
      return (
        &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
          &lt;div&gt;This is the App&lt;/div&gt;
          &lt;Nav /&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={Main} /&gt;
            &lt;Route path=&quot;/about&quot; component={About} /&gt;
            &lt;Route render={() =&gt; &lt;NotFound /&gt;} /&gt;
          &lt;/Switch&gt;
        &lt;/Suspense&gt;
      );
    }
  }
  </code></pre>
  <p>app.test.js</p>
  <pre><code>function renderWithRouter(
    ui,
    {
      route = &quot;/&quot;,
      history = createMemoryHistory({ initialEntries: [route] }),
      ...renderOptions
    } = {}
  ) {
    // eslint-disable-next-line react/prop-types
    function Wrapper({ children }) {
      return &lt;Router history={history}&gt;{children}&lt;/Router&gt;;
    }
    return {
      ...render(ui, { wrapper: Wrapper, ...renderOptions }),
      history
    };
  }
  
  test(&quot;renders homepage by default and can navigate to about&quot;, async () =&gt; {
    renderWithRouter(&lt;App /&gt;);
    screen.getByText(/Home page/i);
    const link = screen.getByRole(&quot;link&quot;, { name: /About/i });
    userEvent.click(link);
    await waitFor(() =&gt; screen.getByText(/About page/i));
    screen.debug();
  });
  </code></pre>
  <p>Here is a code sandbox with the broken test  and the app structure that I am using,
  If you have any tips to use and test lazy and dynamic import, please share</p>
  <p><a href="https://codesandbox.io/s/react-router-suspense-lrnp7?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-router-suspense-lrnp7?file=/src/App.js</a></p>