next-router-mock icon indicating copy to clipboard operation
next-router-mock copied to clipboard

Is it possible to use dynamic routes with the MemoryRouterProvider for rendering in storybook?

Open shawngustaw opened this issue 2 years ago • 3 comments

I know there's a createDynamicrouterParser but it seems like this is only intended to be used in Jest. Is there something equivalent for storybook?

shawngustaw avatar Apr 05 '23 18:04 shawngustaw

Yes, it should definitely be doable, but I haven't tried it out yet so there might be some gotchas.

One gotcha that comes to mind: for Storybook you'll need to import a full path that includes the /next-13 route (or /next-12 etc) like this:

import { createDynamicRouteParser } from "next-router-mock/dynamic-routes/next-13";

Otherwise, I think everything else should just work. You'll call mockRouter.useParser(createDynamicRouteParser([...])) just like the documentation says.

Please let me know if you try this out! I'd be happy to update the documentation with a Storybook example.

scottrippey avatar Apr 05 '23 19:04 scottrippey

All of this should go in your preview.js if you intend for it to be global. Please post back if you've tried it out? I'd be happy to add this to the documentation.

scottrippey avatar Jun 09 '23 13:06 scottrippey

I can confirm, it works.

MrBr avatar Jan 03 '24 18:01 MrBr