React リダイレクトをテストする

react-routerのバージョンは"react-router-dom": "5.2.0"。

最初こんなふうにリダイレクトをテストしようとしていた。

import { MemoryRouter, Switch, Route } from 'react-router-dom';

test('5秒後リダイレクト', async () => {
  jest.useFakeTimers();

  render(
    <MemoryRouter
      initialEntries={[
        `https://example.com/callback?email=test%40example.com`,
      ]}
    >
      <Switch>
        <Route
          exact
          path="/callback"
          component={Callback}
        />
        <Route
          path="/login"
          component={() => <div>ログインページ</div>}
        />
      </Switch>
      ,
    </MemoryRouter>,
  );

  expect(screen.getByText(/リダイレクト中.../)).toBeInTheDocument();

  act(() => {
    jest.advanceTimersByTime(5000);
  });

  expect(await screen.findByText('ログインページ')).toBeInTheDocument();
})

しかし上記のコードだと、うまく Callback コンポーネントがレンダリングされない。最終的に以下のコードになった。

import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';

test('5秒後リダイレクト', () => {
  jest.useFakeTimers();
  const history = createMemoryHistory({
    initialEntries: [
      `https://example.com/callback?email=test%40example.com`,
    ],
  });

  render(
    <Router history={history}>
      <Callback />
    </Router>
  );

  expect(screen.getByText(/リダイレクト中.../)).toBeInTheDocument();

  act(() => {
    jest.advanceTimersByTime(5000);
  });

  expect(history.location.pathname).toEqual('/login');
})

なぜ最初のコードがうまく動かないのかよくわからない。