How to mock next/router in Storybook

README.md

If you use Storybook with Next.js and have components using next/link you'll have to mock next/router the same you would for testing with Jest or others. Simply create a file with the mock router as shown below and import it in your Storybook config.

This is based on some information from an issue on Next.js:

vercel/next.js#1827

config.js

import { configure } from '@storybook/react';
import './mockNextRouter';

/* ... */

mockNextRouter.js

import Router from 'next/router';

Router.router = {
  push: () => {},
  prefetch: () => {},
};

For people working with Next 9.4.0 or higher, make the prefetch function return a promise

Router.router = {
    push: () => {},
    prefetch: () => new Promise((resolve, reject) => {}),
};

to prevent the following error:
link.js:14 Uncaught TypeError: Cannot read property 'catch' of undefined at Link.prefetch (link.js:14)

When I do this and I click a link on a story, I get a blank page with the text Cannot GET /some/example/[endpoint]/here. Do you know why this happens? I'm using NextJS version 10.2.3 and Storybook version 5.1.10. In other words, prefetching works fine (I can even put a storybook action in the function call before returning the promise as above and I see the action in Storybook when hovering on a link, which fires the prefetch method). But pushing is another story.