genetic-orange

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?

12 Replies

foreign-sapphire•2y ago

this might be related to this: https://github.com/TanStack/router/issues/855#issuecomment-1861829436

GitHub

Router state status doesn't change on latest version · Issue #855 ·...

Describe the bug The kitchen sink example route state doesn't get updated, it's still stuck on pending I've attached recording for BETA-230 and BETA-248 BETA-230 router-230.mov BETA-248...

genetic-orangeOP•2y ago

I saw that bug, but in that screen recording at least the target route is getting rendered. In my tests if I do something like

    await user.click(
      await screen.findByRole("link", { name: "Navigate to target" })
    );

    expect(await screen.findByRole("heading", { level: 3 })).toHaveTextContent(
      "Target"
    );

    await user.click(
      await screen.findByRole("link", { name: "Navigate to target" })
    );

    expect(await screen.findByRole("heading", { level: 3 })).toHaveTextContent(
      "Target"
    );

it fails because the original route is still there and the target route never renders

foreign-sapphire•2y ago

nothing from router.state is updating after initial render, see this example: https://stackblitz.com/edit/github-rwuc2w-21my4e?file=src%2Fmain.tsx

Manuel Schiller

StackBlitz

Router Quickstart Example (forked) - StackBlitz

Run official live example code for Router Quickstart, created by Tanstack on StackBlitz

foreign-sapphire•2y ago

click on about, it will still show "/" as pathname

foreign-sapphire•2y ago

when using useRouterState, it works as expected: https://stackblitz.com/edit/github-rwuc2w-ptgz7y?file=src%2Fmain.tsx

Manuel Schiller

StackBlitz

Router Quickstart Example (forked) - StackBlitz

Run official live example code for Router Quickstart, created by Tanstack on StackBlitz

genetic-orangeOP•2y ago

I don't think this is related to my issue. I added a div with the pathname from useRouterState to my test root route and it never updates. The navigation isn't happening at all in my unit tests.

genetic-orangeOP•2y ago

Here's a stackblitz with the failing test if anyone is interested: https://stackblitz.com/edit/stackblitz-starters-jqjpjm?file=README.md

Luke

StackBlitz

Tanstack Router - StackBlitz

Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine

foreign-sapphire•2y ago

pnpm test fails with a bunch of unrelated errors:

> tanstack-router-react-example-basic@0.0.0 test /home/projects/stackblitz-starters-jqjpjm
> vitest


 DEV  v1.0.4 /home/projects/stackblitz-starters-jqjpjm

 ❯ src/main.test.tsx (2) 1058ms
   ❯ main (2) 1057ms
     ✓ should render route
     × should navigate to target route 1026ms



 FAIL  src/main.test.tsx > main > should navigate to target route
TestingLibraryElementError: Unable to find an element by: [data-testid="pathname"]

 ❯ waitForWrapper node_modules/.pnpm/@testing-library+dom@8.20.1/node_modules/@testing-library/dom/dist/wait-for.js:166:27
 ❯ findByTestId node_modules/.pnpm/@testing-library+dom@8.20.1/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
 ❯ eval src/main.test.tsx:22:25
     20|     );
     21| 
     22|     expect(await screen.findByTestId('pathname')).toBe('target');
       |                         ^
     23| 
     24|     expect(await screen.findByRole('heading', { level: 3 })).toHaveTextContent(


 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  02:40:24
   Duration  2.78s (transform 248ms, setup 71ms, collect 419ms, tests 1.06s, environment 202ms, prepare 148ms)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

> tanstack-router-react-example-basic@0.0.0 test /home/projects/stackblitz-starters-jqjpjm
> vitest


 DEV  v1.0.4 /home/projects/stackblitz-starters-jqjpjm

 ❯ src/main.test.tsx (2) 1058ms
   ❯ main (2) 1057ms
     ✓ should render route
     × should navigate to target route 1026ms



 FAIL  src/main.test.tsx > main > should navigate to target route
TestingLibraryElementError: Unable to find an element by: [data-testid="pathname"]

 ❯ waitForWrapper node_modules/.pnpm/@testing-library+dom@8.20.1/node_modules/@testing-library/dom/dist/wait-for.js:166:27
 ❯ findByTestId node_modules/.pnpm/@testing-library+dom@8.20.1/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
 ❯ eval src/main.test.tsx:22:25
     20|     );
     21| 
     22|     expect(await screen.findByTestId('pathname')).toBe('target');
       |                         ^
     23| 
     24|     expect(await screen.findByRole('heading', { level: 3 })).toHaveTextContent(


 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  02:40:24
   Duration  2.78s (transform 248ms, setup 71ms, collect 419ms, tests 1.06s, environment 202ms, prepare 148ms)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

or is this the error that you expect?

genetic-orangeOP•2y ago

that is the error that I am talking about. The test "should navigate to target route" is clicking a Link to target route, and the target route is never rendering. As I mentioned previously, I added a test id with the pathname from useRouterState in my test root route, which is supposed to work correctly, but the navigation is not happening so useRouterState is not updating and no components on the target page are rendering I appologize, that testid assertion was not correct, since I expected it to fail I didn't look close enough at what the failure was. I updated the test and now it fails with the correct assertion. I tried previous router versions and it passes with beta 204 and then breaks completely with 205 due to a change with createMemoryHistory.

genetic-orangeOP•2y ago

Just updated example to 1.0.0 and still not able to navigate in unit tests, does anyone have unit tests that successfully navigate? https://stackblitz.com/edit/stackblitz-starters-jqjpjm

Luke

StackBlitz

Tanstack Router - StackBlitz

Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine

foreign-sapphire•2y ago

the memory router issue here seems related https://github.com/TanStack/router/issues/880

GitHub

Can't navigate with Memory History Router · Issue #880 · TanStack/r...

Describe the bug Cannot use 'Link', 'navigate.to', or any other navigation method with the createMemoryHistory API. Btw, will tanstack router supports nested routers? It would be gr...

extended-salmon•2y ago

@Manuel Schiller it seems related to these code, createMemoryHistry does not call the onUpdate callback. Adding onUpdate cb might fix this.

Gaming

Programming

Navigating in unit tests

Did you find this page helpful?