TanStackT
TanStack10mo ago
1 reply
worthy-rose

How can I test navigation with Cypress Component Tests?

I am struggling to find a reliable way to test transitions from one page to another using CY component tests. I created a custom mount that is wrapped using the following provider:
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
Was this page helpful?