How to useRouter with storybook?

[remy]

As a precursor, the storybook example is pretty useless (when/if I get time, I'll send a PR to tidy it up, the next.js really isn't next-ish and it doesn't answer any basic questions - like this).

I've got a component that calls useRouter (a navigate bar) and I want to test it in storybook, but it throws when router.pathname is access since, I'd imagine, router is null.

What pattern do I need to test this outside of the full nextjs setup?

[jamesmosier]

useRouter relies on the Context API, so maybe wrapping the storybook component in the Router's context similar to this jest mocking setup:

import { RouterContext } from 'next/dist/next-server/lib/router-context';

<RouterContext.Provider value={{...mockedRouterContext}}>

Obviously not the best answer because the RouterContext is technically not a public API.

[michaelbirchler]

@remy you can find a solution on how to mock useRouter with storybook here.