Navigating in unit tests

After upgrading to the latest router version (previously on 69) navigating in unit tests broke and I haven't been able to figure out why. For unit tests, we create a test specific route tree and load the test route with memory history, something like this:

export const testRootRoute = new RootRoute({
  component: () => {
    return <Outlet />;
  },
  wrapInSuspense: true,
});

export const renderWithRoute = (route: AnyRoute) => {
  route.options.getParentRoute = () => testRootRoute;
  const routeTree = testRootRoute.addChildren([route]);

  const history = createMemoryHistory({
    initialEntries: [route.id],
  });

  const testRouter = new Router({
    routeTree,
    history,
  });

  return {
    ...render(<RouterProvider router={testRouter} />),
    router: testRouter,
    user: userEvent.setup(),
  };
};

export const testRootRoute = new RootRoute({
  component: () => {
    return <Outlet />;
  },
  wrapInSuspense: true,
});

export const renderWithRoute = (route: AnyRoute) => {
  route.options.getParentRoute = () => testRootRoute;
  const routeTree = testRootRoute.addChildren([route]);

  const history = createMemoryHistory({
    initialEntries: [route.id],
  });

  const testRouter = new Router({
    routeTree,
    history,
  });

  return {
    ...render(<RouterProvider router={testRouter} />),
    router: testRouter,
    user: userEvent.setup(),
  };
};

We have tests to verify that navigation from the route under tests to a target route takes place by doing something like:

await waitFor(() => expect(router.state.location.pathname).toBe("/target-route"));

await waitFor(() => expect(router.state.location.pathname).toBe("/target-route"));

This used to work, but now the pathname never changes. I've tried adding the target route to the test route tree but that didn't help. I also tried asserting that the heading changed to match the target route heading, but it looks like the content never changes from the original route. Anyone have any success getting route changes to work in unit tests or have any ideas what could be the issue here?

TanStack•3y ago•

14 replies

clean-aquamarine

Navigating in unit tests

export const testRootRoute = new RootRoute({
  component: () => {
    return <Outlet />;
  },
  wrapInSuspense: true,
});

export const renderWithRoute = (route: AnyRoute) => {
  route.options.getParentRoute = () => testRootRoute;
  const routeTree = testRootRoute.addChildren([route]);

  const history = createMemoryHistory({
    initialEntries: [route.id],
  });

  const testRouter = new Router({
    routeTree,
    history,
  });

  return {
    ...render(<RouterProvider router={testRouter} />),
    router: testRouter,
    user: userEvent.setup(),
  };
};

export const testRootRoute = new RootRoute({
  component: () => {
    return <Outlet />;
  },
  wrapInSuspense: true,
});

export const renderWithRoute = (route: AnyRoute) => {
  route.options.getParentRoute = () => testRootRoute;
  const routeTree = testRootRoute.addChildren([route]);

  const history = createMemoryHistory({
    initialEntries: [route.id],
  });

  const testRouter = new Router({
    routeTree,
    history,
  });

  return {
    ...render(<RouterProvider router={testRouter} />),
    router: testRouter,
    user: userEvent.setup(),
  };
};

We have tests to verify that navigation from the route under tests to a target route takes place by doing something like:

await waitFor(() => expect(router.state.location.pathname).toBe("/target-route"));

await waitFor(() => expect(router.state.location.pathname).toBe("/target-route"));

Navigating in unit tests

Similar Threads

Navigating in unit tests

Similar Threads

Similar Threads

Similar Threads