Testing Component and Hook with Tanstack Router

[R35007]

Hi Team,

I am trying to test my component and a hook with a vitest and RTL.
How to pass the Tanstack Router as a wrapper? Can you please help me on this.

I have got on idea on testing a Component from the following discussion 604 but still this code helps only for the component testing.
I don't know how to test a custom Hook or redux stores and sagas that has a Tanstack Router wrapper around it.

Is there any way that I can provide the Tanstak Router as a wrapper for the render method?

[do-kevin]

It would be nice if we are able to test the routing logic without having to rely on ui framework dependencies. I hope there's an example code for this.

[tannerlinsley]

You can just create a router and call methods on it then test the state.

…

On Aug 10, 2023 at 2:20 PM -0400, Kevin Do ***@***.***>, wrote: It would be nice if we are able to test the routing logic without having to rely on libraries like testing library to traverse the dom or have ui framework as part of our tests. I hope that's possible and I wonder what the code would look like. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Kacper-Arendt]

can you provide some example, i don't get it

[tannerlinsley]

The repo has an example of this.

…

On Aug 11, 2023 at 3:39 PM -0400, Kacper Arendt ***@***.***>, wrote: can you provide some example, i don't get it — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[Kacper-Arendt]

well, i searched in example repos and cant find that one. If i don't wrap children in router its throw error 'Cannot read properties of null (reading 'router')'

[tannerlinsley]

• If you are testing without React, creating a new Router is sufficient, since you wont be using any hooks.
• If you are testing in React, you'll need to use a RouterProvider which is required to use any hooks from the router.

[Rendez]

With React it is as simple as:

<RouterProvider router={router} defaultComponent={TestingComponent} />

Then in router/__mocks__/index.tsx...

import { createRootRoute, createRouter } from '@tanstack/react-router';

const rootRoute = createRootRoute();

export const router = createRouter({
  routeTree: rootRoute
});

[aaronshaf]

Documentation on the main site with testing examples would be great.

[RHeynsZa]

Scared this gets forgotten, but some clearer documentation on Tanstack Router + Testing would be greatly appreciated

[omonk]

I believe tannerlinsley is referring to something like this -

router/packages/react-router/tests/loaders.test.tsx

Lines 34 to 59 in 0de8af7

	test('called on /', async () => {
	const indexLoaderMock = vi.fn()
	const rootRoute = createRootRoute({})
	const indexRoute = createRoute({
	getParentRoute: () => rootRoute,
	path: '/',
	loader: async () => {
	await sleep(WAIT_TIME)
	indexLoaderMock('foo')
	},
	component: () => <div>Index page</div>,
	})
	const routeTree = rootRoute.addChildren([indexRoute])
	const router = createRouter({ routeTree })
	render(<RouterProvider router={router} />)
	const indexElement = await screen.findByText('Index page')
	expect(indexElement).toBeInTheDocument()
	expect(router.state.location.href).toBe('/')
	expect(window.location.pathname).toBe('/')
	expect(indexLoaderMock).toHaveBeenCalled()
	})

Looks quite straightforward to me, will take it for a spin

[amrtgaber]

I believe tannerlinsley is referring to something like this -

router/packages/react-router/tests/loaders.test.tsx

Lines 34 to 59 in 0de8af7

	test('called on /', async () => {
	const indexLoaderMock = vi.fn()
	const rootRoute = createRootRoute({})
	const indexRoute = createRoute({
	getParentRoute: () => rootRoute,
	path: '/',
	loader: async () => {
	await sleep(WAIT_TIME)
	indexLoaderMock('foo')
	},
	component: () => <div>Index page</div>,
	})
	const routeTree = rootRoute.addChildren([indexRoute])
	const router = createRouter({ routeTree })
	render(<RouterProvider router={router} />)
	const indexElement = await screen.findByText('Index page')
	expect(indexElement).toBeInTheDocument()
	expect(router.state.location.href).toBe('/')
	expect(window.location.pathname).toBe('/')
	expect(indexLoaderMock).toHaveBeenCalled()
	})

Looks quite straightforward to me, will take it for a spin

Thanks for suggesting this but for what it's worth I get a type error when I try to do the same thing:

Type 'Router<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, readonly [Route<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown>, ... 11 more ..., unknown>], unknown>, TrailingSlashOption, Record<...>, Record<...>>' is not assignable to type 'Router<RootRoute<undefined, { queryClient: QueryClient; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, NonNullable<...>, Record<...>, Record<...>>'.
  The types of '__store.state' are incompatible between these types.
    Type 'RouterState<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, readonly [Route<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown>, ... 11 more ..., unknown>], unknown>, MakeRouteMatch<...>>' is not assignable to type 'RouterState<RootRoute<undefined, { queryClient: QueryClient; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, MakeRouteMatch<...>>'.
      Type 'MakeRouteMatch<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, readonly [Route<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown>, ... 11 more ..., unknown>], unknown>>' is not assignable to type 'MakeRouteMatch<RootRoute<undefined, { queryClient: QueryClient; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>>'.
        Type 'void | {}' is not assignable to type 'string | {}'.
          Type 'void' is not assignable to type 'string | {}'.ts(2322)
RouterProvider.d.ts(33, 5): The expected type comes from property 'router' which is declared here on type 'IntrinsicAttributes & Omit<RouterOptions<RootRoute<undefined, { queryClient: QueryClient; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, NonNullable<...>, Record<...>, Record<...>>, "context"> & { ...; }'

An update to the docs I think would be the best solution. So far trying to get tanstack router and tanstack query to play nice with tests is a little tricky.

This is what is working for me locally (but it fails in the CI/CD pipeline I'm not sure why yet). Also haven't gotten it working with storybook yet either though I know that's a totally separate issue.

// Import the generated route tree
import { routeTree } from "../routeTree.gen";

export function renderRoute(route: string) {
  const testQueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  });

  const memoryHistory = createMemoryHistory({
    initialEntries: [route],
  });

  const router = createRouter({
    routeTree,
    defaultNotFoundComponent: NoMatch,
    context: {
      queryClient: testQueryClient,
    },
    defaultPreload: "intent",           // not sure if I need this or the next line
    defaultPreloadStaleTime: 0,
    history: memoryHistory,           // also not sure if this is necessary but probably is
  });

  const { rerender, ...result } = render(
    <QueryClientProvider client={testQueryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>,
  );

  return {
    ...result,
    rerender: () =>                // not exactly sure what this rerender property or function is or if I need it
      rerender(
        <QueryClientProvider client={testQueryClient}>
          <RouterProvider router={router} />
        </QueryClientProvider>,
      ),
  };
}

I'm pretty sure I need the memory history so I can render a specific route right away with needing to replicate user events that would navigate to that route (though of course sometimes that's desirable for testing as well).

Then in my test files I use it like this:

import { screen } from "@testing-library/react";
import { describe, expect, test } from "vitest";
import { renderRoute } from "../../test/renderers";

describe("Home", () => {
  test("renders the Home component", async () => {
    renderRoute("/");
    expect(await screen.findByText(/home/i)).toBeInTheDocument();
  });
});

This works ok but I think it's probably overkill since it creates a router for the entire routeTree of the project. The upside is the tests don't have to define any special routes just for themselves but I bet there is a better way. I'm just not 100% how to get the router and query client set up easily for just a single component that needs both.

[amrtgaber]

also I'm not sure what the difference is between the rerender I have above and the one from the tanstack query docs I found a little while ago

rerender: (rerenderUi: ReactElement) =>
      rerender(
        <QueryClientProvider client={testQueryClient}>
          {rerenderUi}
        </QueryClientProvider>,
      ),

They both seem to work.

[alexgrip]

I also get the type error that @amrtgaber get. Seems to work fine except for that My code is basically identical to @amrtgaber and the package own tests. The warning does not seem to appear in this project ...

[cooper-goodman]

Can you explain what you are doing with NoMatch here? Not sure if that's being imported from somewhere.

defaultNotFoundComponent: NoMatch,

I get Cannot find name NoMatch . typescript error here.

Intellisense isn't giving any import suggestions and I've tried importing from react, tanstack query and router as well as testing-library/react. Cant seem to find anything on google for NoMatch

Sorry if it's something obvious...

Thanks!

Here's my tanstack versions for reference, not sure if that createRouter prop is supposed to recognize what NoMatch is.

"@tanstack/react-query": "^5.62.7",
"@tanstack/react-router": "^1.85.0",

Edit: I was able to comment out defaultNotFoundComponent: NoMatch, and got a simple test working. Thank you!

[amrtgaber]

Can you explain what you are doing with NoMatch here? Not sure if that's being imported from somewhere.

defaultNotFoundComponent: NoMatch,

I get Cannot find name NoMatch . typescript error here.

Intellisense isn't giving any import suggestions and I've tried importing from react, tanstack query and router as well as testing-library/react. Cant seem to find anything on google for NoMatch

Sorry if it's something obvious...

Thanks!

Here's my tanstack versions for reference, not sure if that createRouter prop is supposed to recognize what NoMatch is.

"@tanstack/react-query": "^5.62.7", "@tanstack/react-router": "^1.85.0",

Edit: I was able to comment out defaultNotFoundComponent: NoMatch, and got a simple test working. Thank you!

NoMatch is just a react component that renders a 404 page that I wrote myself. It's not from any of the packages. I don't think it's a required property of the router so you can remove it if you don't need it.

[Cer0espada]

I'm also scared that this might get forgotten, having how to testing the docs would be great especially for those that have a large amount of tests seeking to migrate.

[jmurga97]

Want to use this router in a big project and the test are necessary. Hope there is some examples for getting a high percent of code coverage

[tommymorgan]

Here's what I came up with. This is in a brand new project and I'm new to Tanstack Router so we'll have to see how well this scales as the codebase grows. I like the simplicity of it for now though.

// from my index.tsx
export const MyRouterProvider = () => {
    return <RouterProvider router={router} />;
};

// in my test
const { getByRole } = render(<MyRouterProvider />);
const link = getByRole("link", { name: "Tests" });
expect(link).toBeInTheDocument();

[tommymorgan]

The code above works for /. If you need to test a different route you can import your router and navigate to the desired route before your render line:

await router.navigate({
    to: "/products",
});