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.