interface TestProvidersProps {
children: ReactNode;
initialEntries?: string[];
// RoutePaths is a generated type from Tanstack Router
routes?: Array<RoutePaths>;
}
function TestProviders({ children, initialEntries = ['/'], routes = [] }: TestProvidersProps) {
const rootRoute = useMemo(() => {
const root = createRootRoute();
if (routes.length) {
root.addChildren(
routes.map(route =>
createRoute({
path: route,
component: ({ children }) => <>{children}</>,
getParentRoute: () => root,
})
)
);
}
return root;
}, [routes]);
const router = useMemo(
() =>
createRouter({
routeTree: rootRoute,
defaultComponent: () => <>{children}</>,
defaultPreload: false,
history: createMemoryHistory({
initialEntries,
}),
}),
[children, initialEntries, rootRoute]
);
return <RouterProvider router={router as any} />;
}
// In test I call it like this
cy.mount(<SomeComponent />, {
// populating the history
initialEntries: [`/initial-path`, `/other-route`],
// router config
routes: [`_some-layout/initial-path`, `_some-layout/other-route`]
})
// then there is a redirection happing inside <SomeComponent /> using useNavigate, which redirects to /other-route, I don't necessarily want to display the other-route component, but just want it to navigate to that route
// Is there something wrong in my setup? Also, since im using Vite with CY, i can't stub/spy the useNavigate hook so that isn't option here