next/jest does not render correctly with experimental.newNextLinkBehavior enabled

[terrymun]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64
Binaries:
Node: 16.16.0
npm: 8.11.0
Yarn: 1.22.17
pnpm: N/A
Relevant packages:
next: 12.3.1-canary.0
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant (issue lies with next/jest)

How are you deploying your application? (if relevant)

Not relevant (issue lies with next/jest)

Describe the Bug

It seems that the experimental flag newNextLinkBehavior is not being respected by next/jest even when using the with-jest boilerplate example.

The next.config.js file has been updated to include this flag:

/**
 * @type {import('next').NextConfig}
 */
 const nextConfig = {
  experimental: {
    newNextLinkBehavior: true
  }
}

module.exports = nextConfig

The issue in general seems to be that the flag is not being respected at all by Jest, and it is simply rendering using the legacy behavior of <Link>. It is evident when looking at the discrepancy between the rendered results of the same JSX template on index.tsx vs what is rendered by the inline snapshot when running index.test.tsx:

Failure to inherit additional props (e.g. data-testid)

In index.tsx, using the following JSX template with render with the following result:

{/* index.tsx JSX template */}
<Link href="https://example.com" data-testid="link">
  Link element with new behavior
</Link>

{/* index.tsx rendered */}
<a data-testid="link" href="https://example.com">Link element with new behavior</a>

However, running index.test.tsx with the same template will result in a different output:

{/* index.test.tsx JSX template */}
<Link href="https://example.com" data-testid="link">
  Link element with new behavior
</Link>

{/* index.test.tsx rendered in `toMatchInlineSnapshot()` */}
<a href="https://example.com">Link element with new behavior</a>

Notice that the data-testid fails to be rendered.

Failure to render <a> in-place

The JSX template used is:

<Link href="https://example.com" data-testid="link">
  <strong data-testid="content">Link element with new behavior</strong>
</Link>

Rendered by index.tsx:

<a data-testid="link" href="https://example.com">
  <strong data-testid="content">Link element with new behavior</strong>
</a>

Inline snapshot rendered by index.test.tsx:

<strong data-testid="content">Link element with new behavior</strong>

Expected Behavior

It is expected that the Jest rendered output should match exactly as what is rendered by the dev server, i.e. it should respect the newNextLinkBehavior flag.

For example, for this JSX template:

<Link href="https://example.com" data-testid="link">
  Link element with new behavior
</Link>

...should be rendered as the following when running Jest to generate an inline snapshot:

<a href="https://example.com" data-testid="link">Link element with new behavior</a>

Link to reproduction

https://github.com/terrymun/nextjs-link-behavior-demo

To Reproduce

You can use the following JSX templates to verify that the dev render and what Jest renders are very different:

<Link href="https://example.com" data-testid="link">
  Link element with new behavior
</Link>

<Link href="https://example.com" data-testid="link">
  <strong data-testid="content">Link element with new behavior</strong>
</Link>

In order to verify/reproduce the bug, simply check out the repository and run jest using yarn test. Notice that the incorrectly generated inline snapshots actually pass the tests, and these snapshots do not match the rendered behavior when serving the site in dev mode (or building it).

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.