jest example fails with `next/link`

[remy]

Example repo: https://github.com/remy/next-examples/tree/master/with-jest#fails-with

The jest example in the examples directory is too simple, so it quickly falls over when I started testing a slightly larger app (than a single page with some jsx).

How do we get snapshot testing to work with next? Can we have jest tell next (somehow???) that prefetch shouldn't happen?

[remy]

Hmm, on the back of this, prefetch is supposed to be production only - so is jest running next.js in production mode?

Note: I tried NODE_ENV=dev npm test and it fails with the same result You should only use "next/router" inside the client side of your app.

[kunal-mandalia]

+1. Echoed too on #1204

[arunoda]

I think we need to fix this bug. On it.

[remy]

@arunoda did you get anywhere on this? I don't know how to get around this at all, so my application is currently failing all tests :(

[roopemerikukka]

Not sure if this is related, but I'm getting the same error if I'll try to test container that uses Router.push() function directly. I haven't really found a way to mock it.

[arunoda]

Yes. When we use next/router or next/link with prefetch, it'll fail inside JEST.
That's because there's no actual router instance.

We need to find a way to mock this.
Something like this would work.
Haven't tested.

import Router from `next/router`
const mockedRouter = { push: () => {} }
Router.router = mockedRouter

[roopemerikukka]

@arunoda that seems to work. Thanks!

[kgoggin]

For anyone else landing here trying to make this work with a <Link prefetch/> in storybook, I used @arunoda's example but had to add a prefetch noop on the mocked router as well.

[evantahler]

With next 3.x, even without prefetch, <Link /> causes this error

[alexedev]

@kgoggin could you please show your code? did not really understand what you mean by noop and when you put it.

[alexedev]

@kgoggin it seems that I understood.
for anybody using prefetch:

import Router from 'next/router'
const mockedRouter = { push: () => {}, prefetch: () => {} }
Router.router = mockedRouter

[alexedev]

ps when I mock it like this in storybook config for stories to work then I get Uncaught TypeError: Cannot read property 'then' of undefined at Link.linkClicked (link.js:123) because onClick calls linkClicked which has .then(...) after calling Router.router.push. how can we mock this one?

[alexedev]

in the end for storybook (not for jest) I mocked it like this in config:

const actionWithPromise = () => {
  action('clicked link')();
  // we need to return promise because it is needed by Link.linkClicked
  return new Promise((resolve, reject) => reject());
};

const mockedRouter = {
  push: actionWithPromise,
  replace: actionWithPromise,
  prefetch: () => {},
};

Router.router = mockedRouter;

for jest I just have router fully ignored:
jest.mock('next/router');
though it may be not enough if Link onClick needs to be simulated