Ionic React - Testing Routing

Ionic Framework Ionic React
1

Are there any examples of testing Ionic apps with routing? I can’t make it render anything inside IonRouterOutlet in jest tests.

App:

const AppDemo: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/foo" render={() => <p>Foo-div</p>} />
          <Route path="/bar" render={() => <p>Bar-div</p>} />
          <Redirect exact from="/" to="/foo" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

Test:

test("doesnt work 1", async () => {
  const { findByText } = render(<AppDemo />);
  await findByText("Foo-div");
});

test("doesnt work 2", async () => {
  const { findByText } = render(
    <MemoryRouter initialEntries={["/foo"]}>
      <AppDemo />
    </MemoryRouter>
  );
  await findByText("Foo-div");
});

test("doesnt work 3", async () => {
  const history = createMemoryHistory();
  history.push("/foo");
  render(
    <Router history={history}>
      <AppDemo />
    </Router>
  );
  await waitForElement(() => screen.getByText("Foo-div"));
});

It always just ends up rendering

<body>
  <div>                   
    <ion-app>             
      <ion-router-outlet />
    </ion-app>                
  </div>                      
</body>

All of these tests pass if I replace IonRouterOutlet with regular React’s Switch.

Ionic version: 6.12.3

2

I found a workaround. I extract everything from IonReactRouter into a separate component and test that component instead.

// Can't test this.
const App: React.FC = () => {
  return (
    <App>
      <IonReactRouter>
        <AppMainComponent/>
      </IonReactRouter>
    </App>
  );
};

// But can test this!
const AppMainComponent: React.FC = () => {
  return (
    <IonRouterOutlet>
      <Route path="/foo" render={() => <p>Foo-div</p>} />
      <Route path="/bar" render={() => <p>Bar-div</p>} />
      <Route exact path="/" render={() => <Redirect to="/foo" />} />
    </IonRouterOutlet>
  );
};

test("routing", async () => {
  const { findByText } = render(
    <MemoryRouter initialEntries={["/bar"]}>
      <AppMainComponent />
    </MemoryRouter>
  );
  await findByText("Bar-div");
});