T
TanStack•6mo ago
stormy-gold

Type Issues for an utility test function

Hi 👋 I've created a buildSimpleRouterWithContext utility for testing that works great for basic routes to avoid recreating all of the route tree in every test: 
export const buildSimpleRouterWithContext = (
  element: ReactNode,
  initialPath = "/",
  contextOverrides = {},
) => {
  const root = createRootRouteWithContext<MyContext>()();
  const _authenticated = createRoute({
    getParentRoute: () => root,
    id: "_authenticated",
  });

  const children = createRoute({
    component: () => element,
    getParentRoute: () => _authenticated,
    path: initialPath,
    validateSearch: BaseRoute.options.validateSearch,
  });

  const router = createRouter({
    context: {
      ...defaultContext(),
      ...contextOverrides,
    },
    defaultPreloadDelay: 0,
    history: createMemoryHistory({
      initialEntries: [initialPath],
    }),
    routeTree: root.addChildren([_authenticated.addChildren([children])]),
  });

  return <RouterProvider<typeof router> router={router} />;
};
export const buildSimpleRouterWithContext = (
  element: ReactNode,
  initialPath = "/",
  contextOverrides = {},
) => {
  const root = createRootRouteWithContext<MyContext>()();
  const _authenticated = createRoute({
    getParentRoute: () => root,
    id: "_authenticated",
  });

  const children = createRoute({
    component: () => element,
    getParentRoute: () => _authenticated,
    path: initialPath,
    validateSearch: BaseRoute.options.validateSearch,
  });

  const router = createRouter({
    context: {
      ...defaultContext(),
      ...contextOverrides,
    },
    defaultPreloadDelay: 0,
    history: createMemoryHistory({
      initialEntries: [initialPath],
    }),
    routeTree: root.addChildren([_authenticated.addChildren([children])]),
  });

  return <RouterProvider<typeof router> router={router} />;
};
Now, I'm trying to create an advanced version that supports: 1. Nested paths (like /product/new) 2. Multiple pathless routes (like _authenticated/_labs) Now, I'm hitting some type issues when trying to implement this: 1. Type conflicts between RootRoute and Route when building the route tree 2. When creating routes dynamically, TypeScript loses track of what context/info each route should have access to 3. TypeScript gets confused about route types when we try to connect parent and child routes using addChildren I've tried various approaches with type parameters and assertions but haven't found a clean solution that maintains type safety. - What's the recommended way to handle this kind of dynamic route creation for testing purposes? - Is there a better way to type the parent-child relationship in dynamic routes? - How should we handle the type transition from RootRoute to Route in the hierarchy? - Am I approaching this the wrong way altogether?
1 Reply
stormy-gold
stormy-goldOP•6mo ago
Thanks in advance for your help

Did you find this page helpful?