Are there any examples of testing Ionic apps that use IonRouterOutlet? 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
1 post - 1 participant