Replies: 16 comments 17 replies
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
can you provide some example, i don't get it |
Beta Was this translation helpful? Give feedback.
-
|
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: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
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')' 
|
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
With React it is as simple as: <RouterProvider router={router} defaultComponent={TestingComponent} />Then in import { createRootRoute, createRouter } from '@tanstack/react-router';
const rootRoute = createRootRoute();
export const router = createRouter({
routeTree: rootRoute
}); |
Beta Was this translation helpful? Give feedback.
-
|
Documentation on the main site with testing examples would be great. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, just a simple example using router and or start on how to get started would be really appreciated |
Beta Was this translation helpful? Give feedback.
-
|
Scared this gets forgotten, but some clearer documentation on Tanstack Router + Testing would be greatly appreciated |
Beta Was this translation helpful? Give feedback.
-
|
I believe tannerlinsley is referring to something like this - router/packages/react-router/tests/loaders.test.tsx Lines 34 to 59 in 0de8af7 Looks quite straightforward to me, will take it for a spin |
Beta Was this translation helpful? Give feedback.
-
Thanks for suggesting this but for what it's worth I get a type error when I try to do the same thing: 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. |
Beta Was this translation helpful? Give feedback.
-
|
also I'm not sure what the difference is between the rerender: (rerenderUi: ReactElement) =>
rerender(
<QueryClientProvider client={testQueryClient}>
{rerenderUi}
</QueryClientProvider>,
),They both seem to work. |
Beta Was this translation helpful? Give feedback.
-
|
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 ... |
Beta Was this translation helpful? Give feedback.
-
|
Can you explain what you are doing with
I get 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 Sorry if it's something obvious... Thanks! Here's my tanstack versions for reference, not sure if that
Edit: I was able to comment out |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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(); |
Beta Was this translation helpful? Give feedback.
-
|
The code above works for await router.navigate({
to: "/products",
}); |
Beta Was this translation helpful? Give feedback.
-
|
@tommymorgan |
Beta Was this translation helpful? Give feedback.
-
|
Hey all, I ended up suffering through getting a testing setup working for a few days so I wanted to share my solutions here in case anyone else could benefit from them. Our app has a ton of unit tests, and heavily utilizes page-specific context providers as well. So, I needed to come up with reusable testing helpers that were capable of wrapping both hooks and components in custom providers as well as our base providers (localization, query, etc) and a valid Tanstack Router instance. Here's what is working for us (so far): renderWithProviders (for components)UsagerenderHookWithProviders (for hooks)Usage |
Beta Was this translation helpful? Give feedback.
-
|
Good to make your contribution as part of the official documentation. |
Beta Was this translation helpful? Give feedback.
-
|
I just finished migrating our app from This should work for any project following the file-based routing approach (I haven't tested the others). However, there's a few things to keep in mind:
Now that that's out of the way, here's the code: // vite.config.ts
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
TanStackRouterVite({
routeTreeFileFooter: [
"export type RouteId = Exclude<keyof FileRoutesById, '__root__'>;",
'export type Route = FileRoutesById[RouteId];',
'export type RouteTree = typeof routeTree;',
],
// ...
}),
// ...
],
// ...
});// TestRouterProvider.tsx
import { FunctionComponent, ReactNode } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
AnyRoute,
createMemoryHistory,
createRootRoute,
createRoute,
createRouter,
ErrorComponent,
RootRoute,
RouterProvider,
} from '@tanstack/react-router';
// You'll need to modify your Vite config to have access to these types.
import { type Route, type RouteTree, routeTree } from '@src/routeTree.gen';
const getRouteChildren = (route: Route | RouteTree, parentRoute: AnyRoute): AnyRoute[] => {
return Object.values(route.children ?? {}).map((childRoute: AnyRoute) => {
if (!('path' in childRoute.options)) {
// This should never happen!
throw new Error(
`Found a route without a path. All routes must have a path. Route options: ${JSON.stringify(childRoute.options)}`
);
}
const testRoute = createRoute({
path: childRoute.options.path,
getParentRoute: () => parentRoute,
});
testRoute.addChildren(getRouteChildren(childRoute, testRoute));
return testRoute;
});
};
let cachedRootRoute: RootRoute | null = null;
// WARNING: Importing the `routeTree` in this file will cause your test's module graph to include all of the routes, heavily impacting
// test execution time (Up to 2x slower on Jest and 1.25x on Vitest if using the workaround).
// I *STRONGLY* recommend you manually create the `testRouteTree` yourself or if you're using Vitest and don't mind a performance
// hit to test execution time (~25% longer execution times), then refer to the bottom of this Github comment for a Vitest-specific approach to generating
// the testRouteTree without blowing up your test's module graph.
const buildTestRouteTree = (): RootRoute => {
if (cachedRootRoute) {
return cachedRootRoute;
}
const rootRoute = createRootRoute();
rootRoute.addChildren(getRouteChildren(routeTree, rootRoute));
// Cache the test route tree. TODO: Figure out how to get this cache shared across test files. Perhaps https://vitest.dev/config/#provide?
cachedRootRoute = rootRoute;
return rootRoute;
};
type RoutePath = Route['path'];
type RouteByPath<Path extends RoutePath> = Extract<Route, { path: Path }>;
type PathEntry<Path extends RoutePath> = (keyof RouteByPath<Path>['types']['params'] extends never
? { path: Path }
: { path: Path; params: RouteByPath<Path>['types']['params'] }) &
(keyof RouteByPath<Path>['types']['fullSearchSchema'] extends never
? // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- No need to include search if there are no search params defined for the route.
{}
: {
search?: RouteByPath<Path>['types']['fullSearchSchema'];
});
// Required otherwise the union type is not inferred correctly (union of unique objects vs object with union values)
type PathEntries<Path extends RoutePath> = Path extends string ? PathEntry<Path> : never;
/**
* The initial entries for the router history. Each entry should contain a path and its respective
* params and search params if they exist. If the route has a catchAll path then the
* params will be set in the order they appear in the params object.
*/
export type InitialEntries = Array<PathEntries<RoutePath>>;
const replacePlaceholders = <Path extends RoutePath>(
path: Path,
params: RouteByPath<Path>['types']['params']
): string => {
const replacementParams = { ...params };
let url = path.replace(/\$([a-zA-Z0-9_]+)/g, (_, key: keyof typeof replacementParams) => {
const replacement = replacementParams[key];
if (!replacement) {
throw new Error(`Missing replacement for placeholder: ${String(key)}`);
}
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete -- We need to delete the key to avoid duplicate replacements for catchAll routes
delete replacementParams[key];
return String(replacement);
});
// If there are any remaining params (catchAll route), append them to the end of the URL
for (const key in replacementParams) {
url += `/${String(replacementParams[key])}`;
}
return url;
};
const getRouterEntries = (initialEntries: InitialEntries): string[] => {
return initialEntries.map((entry) => {
const { path } = entry;
const needsReplace = 'params' in entry;
const search = ('search' in entry && entry.search) ?? {};
type Search = typeof search;
const searchString = Object.entries(search).reduce(
(serializedSearch, searchEntry, currentIndex) => {
const [key, value] = searchEntry as [keyof Search, Search[keyof Search]];
serializedSearch += `${currentIndex === 0 ? '' : '&'}${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
return serializedSearch;
},
'?'
);
if (!needsReplace) {
return `${path}${searchString}`;
}
const fullPath = replacePlaceholders(path, entry.params);
return `${fullPath}${searchString}`;
});
};
interface TestRouterProviderProps {
children: ReactNode;
client?: QueryClient;
initialEntries?: InitialEntries;
}
export const TestRouterProvider: FunctionComponent<TestRouterProviderProps> = ({
children,
client,
initialEntries = [{ path: '/' }],
}) => {
const queryClient = client ?? new QueryClient();
const memoryHistory = createMemoryHistory({
initialEntries: getRouterEntries(initialEntries),
});
const router = createRouter({
routeTree: buildTestRouteTree(),
context: {
queryClient,
},
defaultComponent: () => children,
// Mute "wasn't caught by any route" errors. Ideally we would have a way to disable
// all error handling here so we could assert on components throwing errors.
// Overriding this component to try and get rid of the root error boundary does
// not work.
defaultErrorComponent: ErrorComponent,
defaultPreload: 'intent',
defaultPreloadStaleTime: 0,
history: memoryHistory,
});
return (
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
);
};// test-utils/render.tsx
import { ReactElement, ReactNode } from 'react';
import { QueryClient } from '@tanstack/react-query';
import {
RenderOptions,
render as baseRender,
} from '@testing-library/react';
import { InitialEntries, TestRouterProvider } from './TestRouterProvider';
interface WrapperProps {
children: ReactNode;
client?: QueryClient;
initialEntries?: InitialEntries;
}
export const wrapper = ({ children, client, initialEntries }: WrapperProps) => {
return (
<TestRouterProvider client={client} initialEntries={initialEntries}>
{children}
</TestRouterProvider>
);
};
export const render = (
ui: ReactElement,
options?: RenderOptions & {
initialEntries?: InitialEntries;
client?: QueryClient;
}
) =>
baseRender(ui, {
...options,
wrapper: ({ children }) => {
const Wrapper = wrapper;
const OptionsWrapper = options?.wrapper;
if (OptionsWrapper) {
return (
<Wrapper initialEntries={options.initialEntries} client={options.client}>
<OptionsWrapper>{children}</OptionsWrapper>
</Wrapper>
);
}
return (
<Wrapper initialEntries={options?.initialEntries} client={options?.client}>
{children}
</Wrapper>
);
},
});Now you can write your tests just like you would with // GoBackButton.tsx
import { Link, useSearch } from '@tanstack/react-router';
export const GoBackButton = () => {
const search = useSearch({
strict: false,
});
return (
// Note the directory syntax
<Link to=".." search={search}>
{GO_BACK}
</Link>
);
};// GoBackButton.test.tsx
import { screen } from '@testing-library/react';
import { render } from '@src/test-utils';
import { BackButton } from './BackButton';
describe('GoBackButton', () => {
it('includes search params in the URL if they exist', () => {
render(<BackButton />, {
initialEntries: [
{
path: '/users/$username/teams/$team',
params: {
username: 'rmzNadir',
team: 'TanStack',
},
search: {
q: 'search',
},
},
],
});
const link = screen.getByRole('link');
expect(link).toHaveAttribute('href', '/users/rmzNadir/teams?q=search'); // Passes ✅
});
});If you're using Vitest and don't mind the ~25% longer test execution times then you can leverage Vitest's provide inside a global setup file to avoid blowing up the test's module graph: // vitest-global-setup.ts -- Don't forget to add this to your vitest.config.ts file
import type { TestProject } from 'vitest/node';
import { type Route, type RouteTree, routeTree as rootRoute } from './src/routeTree.gen';
export interface TestRoute {
path: string;
children: TestRoute[];
}
const getRouteChildren = (route: Route | RouteTree): TestRoute[] => {
return Object.values(route.children ?? {}).map((childRoute: Route) => {
if (!('path' in childRoute.options)) {
throw new Error(
`Found a route without a path. All routes must have a path. Route options: ${JSON.stringify(childRoute.options)}`
);
}
return {
path: childRoute.options.path,
children: getRouteChildren(childRoute),
};
});
};
// eslint-disable-next-line import/no-default-export -- Vitest requires a default export
export default function setup(project: TestProject) {
project.provide('testRouteTree', {
path: '__root__',
children: getRouteChildren(rootRoute),
});
}
declare module 'vitest' {
export interface ProvidedContext {
testRouteTree: TestRoute;
}
}Now // TestRouterProvider.tsx
...
const getRouteChildren = (route: TestRoute, parentRoute: AnyRoute): AnyRoute[] => {
const childRoutes = route.children.map((childRoute) => {
const newRoute = createRoute({
path: childRoute.path,
getParentRoute: () => parentRoute,
});
const nestedChildren = getRouteChildren(childRoute, newRoute);
newRoute.addChildren(nestedChildren);
return newRoute;
});
return childRoutes;
};
let cachedRootRoute: RootRoute | null = null;
const buildTestRouteTree = (): RootRoute => {
if (cachedRootRoute) {
return cachedRootRoute;
}
const rootRoute = createRootRoute();
// Note how we're injecting the `testRouteTree` object.
rootRoute.addChildren(getRouteChildren(inject('testRouteTree'), rootRoute));
// Cache the test route tree for the current test file.
cachedRootRoute = rootRoute;
return rootRoute;
};
...I hope this helps someone! If you have any questions or suggestions, please feel free to reach out. I'm sure there's plenty of room for improvement here. 😺 edit: Simplified types a bit & made edit: Added disclaimer about importing |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
@rmzNadir this is really good. However, I guess you dont use pathless layout routes? See This part fails because of that if (!('path' in childRoute.options)) {
// This should never happen!
throw new Error(
`Found a route without a path. All routes must have a path. Route options: ${JSON.stringify(childRoute.options)}`
);
}Ill bash my head against this, but if you know how to get it working, id love a solution |
Beta Was this translation helpful? Give feedback.
-
|
This works: import { FunctionComponent, ReactNode } from "react";
import { Route, routeTree, RouteTree } from "@propai-web/routeTree.gen";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
AnyRoute,
createMemoryHistory,
createRootRoute,
createRoute,
createRouter,
ErrorComponent,
RootRoute,
RouterProvider,
} from "@tanstack/react-router";
const getRouteChildren = (route: Route | RouteTree, parentRoute: AnyRoute): AnyRoute[] => {
return Object.values(route.children ?? {}).map((childRoute: AnyRoute) => {
const testRoute = createRoute({
path: childRoute.options.path ?? "__root__",
getParentRoute: () => parentRoute,
});
testRoute.addChildren(getRouteChildren(childRoute, testRoute));
return testRoute;
});
};
let cachedRootRoute: RootRoute | null = null;
// WARNING: Importing the `routeTree` in this file will cause your test's module graph to include all of the routes, heavily impacting
// test execution time (Up to 2x slower on Jest and 1.25x on Vitest if using the workaround).
// I *STRONGLY* recommend you manually create the `testRouteTree` yourself or if you're using Vitest and don't mind a performance
// hit to test execution time (~25% longer execution times), then refer to the bottom of this Github comment for a Vitest-specific approach to generating
// the testRouteTree without blowing up your test's module graph.
const buildTestRouteTree = (): RootRoute => {
if (cachedRootRoute) {
return cachedRootRoute;
}
const rootRoute = createRootRoute();
const children = getRouteChildren(routeTree, rootRoute).filter(Boolean);
rootRoute.addChildren(children);
// Cache the test route tree. TODO: Figure out how to get this cache shared across test files. Perhaps https://vitest.dev/config/#provide?
cachedRootRoute = rootRoute;
return rootRoute;
};
type RoutePath = Route["fullPath"];
type RouteByPath<Path extends RoutePath> = Extract<Route, { path: Path }>;
type PathEntry<Path extends RoutePath> = (keyof RouteByPath<Path>["types"]["params"] extends never
? { path: Path }
: { path: Path; params: RouteByPath<Path>["types"]["params"] }) &
(keyof RouteByPath<Path>["types"]["fullSearchSchema"] extends never
? // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- No need to include search if there are no search params defined for the route.
{}
: {
search?: RouteByPath<Path>["types"]["fullSearchSchema"];
});
// Required otherwise the union type is not inferred correctly (union of unique objects vs object with union values)
type PathEntries<Path extends RoutePath> = Path extends string ? PathEntry<Path> : never;
/**
* The initial entries for the router history. Each entry should contain a path and its respective
* params and search params if they exist. If the route has a catchAll path then the
* params will be set in the order they appear in the params object.
*/
export type InitialEntries = Array<PathEntries<RoutePath>>;
const replacePlaceholders = <Path extends RoutePath>(
path: Path,
params: RouteByPath<Path>["types"]["params"]
): string => {
const replacementParams = { ...params };
let url = path.replace(/\$([a-zA-Z0-9_]+)/g, (_, key: keyof typeof replacementParams) => {
const replacement = replacementParams[key];
if (!replacement) {
throw new Error(`Missing replacement for placeholder: ${String(key)}`);
}
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete -- We need to delete the key to avoid duplicate replacements for catchAll routes
delete replacementParams[key];
return String(replacement);
});
// If there are any remaining params (catchAll route), append them to the end of the URL
for (const key in replacementParams) {
url += `/${String(replacementParams[key])}`;
}
return url;
};
const getRouterEntries = (initialEntries: InitialEntries): string[] => {
return initialEntries.map((entry) => {
const { path } = entry;
const needsReplace = "params" in entry;
const search = ("search" in entry && entry.search) ?? {};
type Search = typeof search;
const searchString = Object.entries(search).reduce(
(serializedSearch, searchEntry, currentIndex) => {
const [key, value] = searchEntry as [keyof Search, Search[keyof Search]];
serializedSearch += `${currentIndex === 0 ? "" : "&"}${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
return serializedSearch;
},
"?"
);
if (!needsReplace) {
return `${path}${searchString}`;
}
const fullPath = replacePlaceholders(path, entry.params);
return `${fullPath}${searchString}`;
});
};
type TestRouterProviderProps = {
children: ReactNode;
client?: QueryClient;
initialEntries?: InitialEntries;
};
export const TestRouterProvider: FunctionComponent<TestRouterProviderProps> = ({
children,
client,
initialEntries = [{ path: "/" }],
}) => {
const queryClient = client ?? new QueryClient();
const memoryHistory = createMemoryHistory({
initialEntries: getRouterEntries(initialEntries),
});
const router = createRouter({
routeTree: buildTestRouteTree(),
context: {
queryClient,
},
defaultComponent: () => children,
// Mute "wasn't caught by any route" errors. Ideally we would have a way to disable
// all error handling here so we could assert on components throwing errors.
// Overriding this component to try and get rid of the root error boundary does
// not work.
defaultErrorComponent: ErrorComponent,
defaultPreload: "intent",
defaultPreloadStaleTime: 0,
history: memoryHistory,
});
return (
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
);
};Note 2 big changes
Using normal path, returns just /edit as a valid field, which means you cant pass $id. It's also a lot more explicit, but it might need to be reverted? Not sure |
Beta Was this translation helpful? Give feedback.
-
|
@RHeynsZa Ahhh I knew I would miss handling some cases. Glad you got it working man, thanks for sharing the updated code! |
Beta Was this translation helpful? Give feedback.
-
|
This approach breaks after this PR: #4044. It appears the router needs to be loaded before every test after rendering the TestRouterProvider. |
Beta Was this translation helpful? Give feedback.
-
|
I shared my setup for testing here https://dev.to/daelmaak/how-to-test-tanstack-router-4f51. Hope it helps someone. |
Beta Was this translation helpful? Give feedback.
-
|
Imo still not a clear answer, literally, I just want to test something like this using RTL. I don't need it to handle dynamic routing, paths etc... I just need the boiler so I can unit test my components that use tanstack router hooks/components. This is the simplest I could come up with... Simple component that uses Link: |
Beta Was this translation helpful? Give feedback.
-
|
The philosophy I've taken in this approach is to ignore the implementation details of our routes (a component doesn't care about that), but still make best use of type safety. This way we can wrap a component in a mocked route, and still be able to inject context/loader data. type Routes = RegisteredRouter["routesByPath"];
interface MockedRouterProps<T extends keyof Routes = keyof Routes> {
initialLocation?: string;
mockRoute?: MockRoute<T>;
children: React.ReactNode;
}
type MockRoute<T extends keyof Routes> = {
path: T;
loaderData?: Routes[T] extends { types: { loaderData: infer LoaderData } } ? LoaderData : never;
context?: Routes[T] extends { types: { routeContext: infer Context } } ? Context : never;
};
/**
* Router wrapper component for use with renderHook and testing
*/
export const MockedRouter: React.FC<MockedRouterProps> = ({
initialLocation = "/",
mockRoute,
children,
}) => {
const memoryHistory = createMemoryHistory({
initialEntries: [initialLocation],
});
const testRouteTree = createRootRoute({
component: () => (mockRoute ? <Outlet /> : children),
});
if (mockRoute) {
testRouteTree.addChildren([
createRoute({
getParentRoute: () => testRouteTree,
path: mockRoute.path,
component: () => children,
beforeLoad: () => mockRoute.context,
loader: () => mockRoute.loaderData,
}),
]);
}
const router = createRouter({
routeTree: testRouteTree,
defaultPendingMs: 0,
history: memoryHistory,
});
return <RouterProvider router={router} />;
};
export const renderWithRouter = async <R extends keyof Routes>(
component: React.ReactElement,
{
initialLocation = "/",
mockRoute,
...options
}: { initialLocation?: string; mockRoute?: MockRoute<R> } & RenderOptions = {},
): Promise<void> => {
render(
<MockedRouter initialLocation={initialLocation} mockRoute={mockRoute}>
{component}
</MockedRouter>,
options,
);
await waitFor(() => {
// TSR renders async, so we wait for it here
expect(document.body).toBeInTheDocument();
});
};This can then be tested like this: it("should show the reads warning screen and disable the button to continue the journey", async () => {
await renderWithRouter(<MyComponent />, {
initialLocation: "/route/my-param",
mockRoute: {
path: "/route/$param", // restricted to available route paths
loaderData: mockData, // fully typed
},
});
expect(screen.getByText("foo")).toBeInTheDocument();
});It's a similar behaviour to |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
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?
Beta Was this translation helpful? Give feedback.
All reactions