harsh-harlequin

Minimal router tests type error

Hi! I want to have a minimal router for testing, but I have defined a type for router, and now this is giving me a type error. '__store.state' are incompatible between these types. How can I adjust my minimal router to fit the type, or adjust the type to fit my minimal router? Here are my types/interfaces for the actual router:

 
export interface RouterContext {
    queryClient: QueryClient;
    userContext: UserContext;
}
const router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, 
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

 
export interface RouterContext {
    queryClient: QueryClient;
    userContext: UserContext;
}
const router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, 
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

This is the error I get: '__store.state' are incompatible between these types. Here is my minimal router used for testing:

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

const renderRoute = () => {
    const rootRoute = createRootRoute();
    const indexRoute = createRoute({
        component: () => {
            return (
                <React.Fragment>
                    <h1>Dashboard</h1>
                    <Backlink to="/avtaler" text="Gå tilbake til avtaler" />
                </React.Fragment>
            );
        },
        getParentRoute: () => {
            return rootRoute;
        },
        path: '/',
    });

    const router = createRouter({
        routeTree: rootRoute.addChildren([indexRoute]),
    });

  // This is giving me an error, does not match router type declared above
  // '__store.state' are incompatible between these types
    render(<RouterProvider router={router} />);
};

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

const renderRoute = () => {
    const rootRoute = createRootRoute();
    const indexRoute = createRoute({
        component: () => {
            return (
                <React.Fragment>
                    <h1>Dashboard</h1>
                    <Backlink to="/avtaler" text="Gå tilbake til avtaler" />
                </React.Fragment>
            );
        },
        getParentRoute: () => {
            return rootRoute;
        },
        path: '/',
    });

    const router = createRouter({
        routeTree: rootRoute.addChildren([indexRoute]),
    });

  // This is giving me an error, does not match router type declared above
  // '__store.state' are incompatible between these types
    render(<RouterProvider router={router} />);
};

5 Replies

harsh-harlequinOP•16mo ago

I followed the examples when declaring the type for router, but is it ok to do this instead? With this I get no error. But maybe its defeating the purpose?

import type { Router } from '@tanstack/react-router';

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof Router;
    }
}

import type { Router } from '@tanstack/react-router';

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof Router;
    }
}

This (below) is still giving me the same error, not sure what __store.state' is:

onst router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, // This will be set after we wrap the app in an BrukerProvider
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

onst router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, // This will be set after we wrap the app in an BrukerProvider
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

   const router = createRouter({
        context: {
            queryClient: undefined!,
            userContext: undefined!, // This will be set after we wrap the app in an BrukerProvider
        },
        defaultPreload: 'intent',
        defaultPreloadStaleTime: 0,
        routeTree: rootRoute.addChildren([avtalerRoute, indexRoute]),
    });
    // Same Error as before
    render(<RouterProvider router={router} />);

   const router = createRouter({
        context: {
            queryClient: undefined!,
            userContext: undefined!, // This will be set after we wrap the app in an BrukerProvider
        },
        defaultPreload: 'intent',
        defaultPreloadStaleTime: 0,
        routeTree: rootRoute.addChildren([avtalerRoute, indexRoute]),
    });
    // Same Error as before
    render(<RouterProvider router={router} />);

deep-jade•16mo ago

do you have multiple declare module '@tanstack/react-router' in your project? if yes, they probably conflict and produce the error you saw

harsh-harlequinOP•16mo ago

I only have one, but the router in my test does not follow the type declared for router, and I cant figure out how to make it the same type 😦

deep-jade•16mo ago

@ErwannRousseau looks like you have the same issue somehow

yammering-amber•16mo ago

absolutely I have the same error from the upgrade from 1.29.2 to 1.34.9 this code works well :

async function customRender(component: JSX.Element, options = {}) {
  // useful for testing components that use tanstack/react-router
  const rootRoute = createRootRoute({
    component: Outlet,
  });
  const indexRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: "/",
  });
  const routeTree = rootRoute.addChildren({ indexRoute });
  const router = createRouter({ routeTree });
  const result = render(
    <I18nLoaderSync>
      <RouterProvider router={router} defaultComponent={() => component} />
    </I18nLoaderSync>,
    {
      wrapper: ({ children }) => children,
      ...options,
    },
  );
  await waitFor(() => expect(result.container.firstChild).not.toBeNull());
  return result;
}

async function customRender(component: JSX.Element, options = {}) {
  // useful for testing components that use tanstack/react-router
  const rootRoute = createRootRoute({
    component: Outlet,
  });
  const indexRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: "/",
  });
  const routeTree = rootRoute.addChildren({ indexRoute });
  const router = createRouter({ routeTree });
  const result = render(
    <I18nLoaderSync>
      <RouterProvider router={router} defaultComponent={() => component} />
    </I18nLoaderSync>,
    {
      wrapper: ({ children }) => children,
      ...options,
    },
  );
  await waitFor(() => expect(result.container.firstChild).not.toBeNull());
  return result;
}

but I have an error here now : router={router} type error. '__store.state' are incompatible between these types.

Gaming

Programming

Minimal router tests type error

Did you find this page helpful?