Next.js: next@beta-31 breaks Jest tests

[khrome83]

The latest beta breaks Jest tests really bad.

Version: next@beta-31

Any test that renders a component that contains the next/link will fail.

/* global it, expect, describe */

import React from 'react';
import renderer from 'react-test-renderer';
import App from '../../components/Logo.js';

describe('Logo', () => {
  it('renders correctly.', () => {
    const component = renderer.create(<App id="cat" href="/" title="Awesome Cat" />);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

This breaks the react-test-render method of creating components. This did not happen with the previous version of next/link or next/prefetch.

[khrome83]

Removing prefetch attribute from link declaration removes the errors created when running Jest tests.

This is a temporary work around. Expected that prefetch should not generate the No router instance found. message.

Additionally, the message You should only use "next/router" inside the client side of your app. Is confusing, because I am not explicitly calling next/router anywhere.

[Zaiban]

+1, It's really annoying to have to disable tests for CI Production builds to get prefetch enabled on prod.

[kunal-mandalia]

+1 had to remove prefetch from Links to get tests to pass

[kunal-mandalia]

@Zaiban pulling tests from CI because 1 feature is buggy 😱 what else can you do? @khrome83 's suggestion of removing prefetch altogether seems more reasonable but then your app slows on navigation. Surprised more people aren't experiencing problems with this, especially as it was flagged 2 months ago.. maybe they aren't testing (with Jest)?

[mkitt]

Maybe not the most elegant solution but this is working for me and hopefully just temporary:

<Link href="/" prefetch={process.env.NODE_ENV !== 'test'} >
  <a>Home</a>
</Link>

[Zaiban]

@kunal-mandalia I've been using prefetch={USE_PREFETCH} and setting it false when in test environment, like mkitt did. :p It's easy to circumvent, so not very high priority for the devs I guess. I just wish I had the time to create a PR for this.
(And for the record, I'm not using jest, but running with a bare Mocha setup. Don't think it is framework dependant issue.)

[kunal-mandalia]

@Zaiban @mkitt good idea (as a workaround till its fixed). Using your ideas, I'm using a global defined through webpack called process.env.USE_PREFETCH defined in next.config.js like so:

const webpack = require('webpack')
const path = require('path')
const glob = require('glob')


const USE_PREFETCH = process.env.NODE_ENV !== 'test'

module.exports = {
  webpack: (config, { dev }) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env.USE_PREFETCH': JSON.stringify(USE_PREFETCH)
      })
    )

and then calling prefetch={process.env.USE_PREFETCH} in components

Finally change npm test script to NODE_ENV=test jest and tests work as they should. Zaiban did you use less magic to define your USE_PREFETCH variable?