tanstack-routetree-pruner

Vite Plugin for easing testing in Storybook or Vitest by pruning a TanStack Router Route Tree to only specific page and it's ancestors

Description

TBA

Installation

npm install tanstack-routetree-pruner

Then add a plugin to vite.config.ts

import TanStackRouteTreePrunerPlugin from "tanstack-routetree-pruner";

export default defineConfig({
  plugins: [
    TanStackRouterVite(),
    TanStackRouteTreePrunerPlugin(import.meta.dirname + "/src"),
  ],
});

Add types to vite-env.d.ts:

declare module "*?tree" {
  import { Route } from "@tanstack/react-router";
  export const routeTree: Route;
}

Usage

Now you will be able to import a specific route with all ancestors and to your test or story file and test it in isolation.

Say you have /home route (./src/routes/home.tsx) which you want to write a Storybook Story for

// `./src/routes/home.stories.tsx`
import {
  createMemoryHistory,
  createRouter,
  RegisteredRouter,
  RouterProvider,
} from "@tanstack/react-router";

import { Route } from "./home";
import { routeTree } from "./home?tree"; // <- add ?tree suffix to the route file to get a full routeTree

const router = createRouter({
  routeTree: routeTree,
  history: createMemoryHistory({
    initialEntries: ["/"],
  }),
}) as RegisteredRouter;

const meta: Meta = {
  title: "Pages/Home",
  beforeEach: () => {
    router.navigate({ to: Route.fullPath });
  },
  decorators: [
    () => {
      return <RouterProvider router={router} />;
    },
  ],
};

License

This package is licensed under MIT.