T
TanStack•10mo ago
typical-coral

Mocking/stubbing dynamic path params in storybook stories.

I'm trying to use tanstack-router with vite, react and storybook. I have file-based routing setup and working on my react app, but having issues with dynamic path params in my stories. Ex. /organizations/$organizationId renders a component: ViewOrganization which then pulls organizationId from useParams({ from: "/organizations/$organizationId" });
And I have a decorator creating a memory router for storybook. This works for non-dynamic routes. But when trying to access a nested route with a dynamic-id it fails with: Invariant failed: Could not find an active match from "/organizations/$organizationId" Are there any examples of mocking the path params for the useParams hook?
1 Reply
typical-coral
typical-coralOP•10mo ago
I ended up using a similar approach to this https://github.com/RamiAwar/dataline/blob/main/frontend/.storybook/preview.tsx And then overloading the story parameters like so: 
parameters: {
        layout: 'fullscreen',
        router: {
            initialEntries: ["/organizations/$organizationId"],
            routes: ["/organizations/$organizationId"],
            routeParams: { organizationId: "123" },
        }
    }
parameters: {
        layout: 'fullscreen',
        router: {
            initialEntries: ["/organizations/$organizationId"],
            routes: ["/organizations/$organizationId"],
            routeParams: { organizationId: "123" },
        }
    }

Did you find this page helpful?