NextJS 10 breaks tests by throwing warnings for components using next/link

[thanos-diacakis-grandrounds]

Bug report

Describe the bug

Minimal code to replicate: https://github.com/thanos-diacakis-grandrounds/nextjs-10-link-test-errors

We have a simple component includes a next/link. We have tests that will render the component, and assert various things (assertions omitted in the sample code). This works fine in NextJS 9.5.6. When upgrading to NextJS 10, these tests start throwing the following two warnings:

1. Warning: An update to Link inside a test was not wrapped in act(...). [etc.]
2. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

To Reproduce

1. Check out this repo: https://github.com/thanos-diacakis-grandrounds/nextjs-10-link-test-errors
2. Run "npm run test"
3. Observer the warnings

Expected behavior

We expected to see the same behavior as NextJS 9.x - no warnings.

Screenshots

System information

• OS: macOS 10.15.7
• Version of Next.js: 10.0.3
• Version of Node.js: 14.6.0
• Deployment: local dev with "npm run test"

Additional context

If there is a single test, it seems to pass with no warnings. Once you add more tests, it seems to fail, even if the additional tests do nothing at all.

Removing the resolves the issue.

Tried turning off prefetching, making the act() function async/await, assuming some kind of state change is happening behind the scenes with no luck.

[kfazinic]

I'm getting the same.

[ajw725]

i just spent hours trying to figure out what the heck i was doing wrong. having the same problem.

[mAAdhaTTah]

PR to resolve: #20169. I need to test it fully myself but would appreciate if anyone experiencing this issue could give it a try.

[thanos-diacakis-grandrounds]

@mAAdhaTTah When I install NextJS from your PR, it fails to install "next/babel", and then nothing works. Any idea why?

I am trying to test against your PR to help move it forward.

[mAAdhaTTah]

@thanos-diacakis-grandrounds I tested it by cloning the repo, running the build, and then copying the dist folder into my project's node_modules manually. You can't install a monorepo by pointing the version to a git ref, unfortunately (if that's what you were doing).

[thanos-diacakis-grandrounds]

Thanks for the steps. I have performed those, and I can confirm that it un-breaks all of our tests.

In case anyone else wants to follow this and needs more details:

• Check out James' PR branch of NetxJS
• Assuming you have yarn, run "yarn dev". When it's done building, you can ^c it. It defaults to "watcher" mode.
• Replace your_projects/node_modules/next/dist with james_branch_nextjs/packages/next/dist

[thinkjrs]

I experienced this too.

And since a fix looks to be implemented, I didn't want to really change anything.

Fortunately we can temporarily squash the errors. Simply place the below at the top of the test file spitting the error (and remove once you've updated Next.js):

// this is just a little hack to silence a warning that we'll get until we
// upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853
import "@testing-library/react";
const originalError = console.error;
beforeAll(() => {
  console.error = (...args) => {
    if (/Warning.*not wrapped in act/.test(args[0])) {
      return;
    }
    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

See testing library readme.

[gsantiago]

I'm still getting errors for simply rendering a Link. Instead of supressing the error, I prefer to just mock the Link component:

// put this in your setupTests.js or some other file that runs before your tests
jest.mock('next/link', () => ({
  __esModule: true,
  default: ({ children, href }) => (
    <children.type {...children.props} href={href} />
  )
}));

[filipesmedeiros]

Like @gsantiago I still experience this @10.05, @Timer. Do you need a repro?

[bcomnes]

Getting this again in next@10.2.3 with components in tests that consume dynamic components. I'll open an issue with a reproduction.

[adamduncan]

Thanks @gsantiago.

Ran into this same issue when using jest and @testing-library/react on a Next.js (v10.0.4) project. Similar to your suggestion here, I've worked around the issue by creating a simple mocked Link component:

// test/mocks/Link.js
export default ({ children, href }) => (
  <children.type {...children.props} href={href} />
);

and mocked across the test suite using jest's moduleNameMapper configuration:

// jest.config.js
module.exports = {
  moduleNameMapper: {
    'next/link': require.resolve('./test/mocks/Link.js'),
  }
}

[Elias-Graf]

Also happening to me.
Could someone please post working and compatible next, react, and react-dom versions? Given that I have like 10 - 30 tests a page, my console is constantly overflowing.

To give more context, this is happening to me given the following package versions:

"next": "^11.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",

I've ended up mocking the Link component, but don't feel too comfortable doing that. Hope this gets resolved 🤞

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.