search

scottrippey / next-router-mock

Mock implementation of the Next.js Router
MIT License
400 stars 38 forks source link

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

Open shawngustaw opened 1 year ago

shawngustaw commented 1 year ago

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?

scottrippey commented 1 year ago

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 commented 1 year ago

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.

MrBr commented 9 months ago

I can confirm, it works.