title: Testing navigate of reach router with react-testing library
body: <p>An app that uses Reach Router. 
  Has two pages, apage and bpage rendering APage and BPage<br>
  Apage has a heading and button. When the button is clicked, app navigates to bpage.</p>
  
  <p>App.js </p>
  
  <pre><code>import { Router, navigate } from "@reach/router";
  
  export default function AppWithRouter() {
  
  
    const APage = () =&gt; {
  
      const handle = () =&gt; {
         navigate('bpage')
      }
  
      return(
        &lt;div&gt;
          &lt;h1&gt;A Page&lt;/h1&gt;
        &lt;button onClick={handle}&gt;Sign In&lt;/button&gt;
        &lt;/div&gt;
      )   
  
    }
  
    const BPage = () =&gt; (&lt;div&gt;&lt;h1&gt;B Page&lt;/h1&gt;BPage&lt;/div&gt;)
  
  
    return (
        &lt;Router&gt;
          &lt;APage path="/apage" /&gt;
          &lt;BPage path="/bpage" /&gt;
        &lt;/Router&gt;
    );
  }
  </code></pre>
  
  <p>Using @testing-library/react for testing this navigation from apage to bpage using the text content of the heading.</p>
  
  <p>Based on <a href="https://testing-library.com/docs/example-reach-router" rel="nofollow noreferrer">https://testing-library.com/docs/example-reach-router</a></p>
  
  <p>renderwithRouter.js</p>
  
  <pre><code>export default function renderWithRouter(ui, route = "/") {
    let source = createMemorySource(route);
    let history = createHistory(source);
  
    return {
      ...render(&lt;LocationProvider history={history}&gt;{ui}&lt;/LocationProvider&gt;),
      history
    };
  }
  </code></pre>
  
  <p>My test for the navigation</p>
  
  <p>App.test.js</p>
  
  <pre><code>test('click navigates to b page', async () =&gt; {
  
  
    const { getByRole  } = renderWithRouter(&lt;App /&gt;,  '/apage')
  
    fireEvent.click(getByRole("button"));
  
    await wait(() =&gt; {
      expect(getByRole('heading')).toHaveTextContent(/b page/i)
    });
  
  });
  </code></pre>
  
  <p>Fails giving</p>
  
  <pre><code> Expected element to have text content:
        /b page/i
      Received:
        A Page
  </code></pre>
  
  <p>How so I test for this navigation?</p>