title: Can't get MemoryRouter to work with @testing-library/react
body: <p>I'm trying to test that my router is working as expected. But I can't get the router to point to another location than <code>/</code></p>
  
  <p>Here's my simplified test code. </p>
  
  <p><code>App.tsx</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import {Route, Switch, BrowserRouter} from 'react-router-dom';
  
  const App: React.FC = () =&gt; {
      return (
          &lt;div&gt;
              &lt;BrowserRouter&gt;
                  &lt;Switch&gt;
                      &lt;Route path={'/test'}&gt;test&lt;/Route&gt;
                      &lt;Route path={'/'}&gt;index&lt;/Route&gt;
                  &lt;/Switch&gt;
              &lt;/BrowserRouter&gt;
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <p><code>App.test.tsx</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import App from './App';
  import {MemoryRouter} from 'react-router-dom';
  import {render} from '@testing-library/react';
  
  
  test('renders /test route', async () =&gt; {
      const app = render(
          &lt;MemoryRouter initialEntries={['/test']} initialIndex={0}&gt;
              &lt;App/&gt;
          &lt;/MemoryRouter&gt;);
      expect(app.getByText(/test/i)).toBeInTheDocument();
  });
  
  </code></pre>
  
  <p>I get the following error message</p>
  
  <pre><code>Error: Unable to find an element with the text: /test/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;div&gt;
         index
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>