Jest unit tests are not respecting Next.js config when rendering

Current Behavior

TL;DR: @nrwl/jest does not seem to be taking into account Next.js config when rendering for unit tests.

The experimental flag newNextLinkBehavior is not being used by Nx when rendering <Link> components in unit tests. It, however, renders the <Link> components correctly when serving or building the site.

This bug was discovered when attempting to future proof our local Nx + Next.js setup for next@13 that will be released in the near future. This experimental flag toggles the experimental rendering behavior of <Link>, where it will render an <a> in place without requiring a nested <a> child.

However, this flag does not seem to be respected when running Jest unit tests:

<Link href="https://example.com"><strong>A link</strong></Link>

…will be rendered as:

<strong>A link</strong>

This is apparent when checking the rendered output against inline snapshots:

it("should render <Link> element with nested child with new behavior", () => {
  const { container } = render(
    <Link href="https://example.com" data-testid="link">
      <strong data-testid="content">Link element with new behavior</strong>
    </Link>
  );
  expect(container).toMatchInlineSnapshot(`
    <div>
      <strong
        data-testid="content"
      >
        Link element with new behavior
      </strong>
    </div>
  `);
  // Notice the incorrect markup rendered. The `<strong>` tag should have been wrapped in an `a` tag
  // If this TSX template is used on `index.tsx` then we will see correct output
});

Expected Behavior

<Link href="https://example.com"><strong>A link</strong></Link>

…should be rendered as:

<a href="https://example.com"><strong>A link</strong></a>

The inline snapshot is expected to have an <a> wrapping the <strong> element, i.e.:

it("should render <Link> element with nested child with new behavior", () => {
  const { container } = render(
    <Link href="https://example.com" data-testid="link">
      <strong data-testid="content">Link element with new behavior</strong>
    </Link>
  );
  expect(container).toMatchInlineSnapshot(`
    <div>
      <a href="https://example.com">
       <strong
          data-testid="content"
        >
          Link element with new behavior
        </strong>
      </a>
    </div>
  `);
});

This is verified to work when serving the app using yarn next. So the discrepancy here is that Jest is not rendering the markup correctly, but serving the site does result in correct rendering. This causes unit tests to fail, but end-to-end tests to pass.

Question: Is this a regression? .i.e Did this used to be the behavior at one point?

Not that I know of, as this flag is recently introduced, and it simply seems that Nx is not interpolating this setting from next.config.ts when serving or testing the app.

Steps to Reproduce

A minimal Github repo is available at this link: https://github.com/terrymun/nx-nextjs-link-behavior-demo

1. Run index.spec.tsx and note the generated inline snapshot
2. Run yarn start and compare the generated markup: they are different from the inline snapshot, suggesting that Jest’s render function has failed to take into account the experimental flag from next.config.ts3.

Failure Logs

n.a.

Environment

Node : 16.16.0
OS   : darwin x64
npm  : 8.11.0

nx : 14.6.5
@nrwl/angular : Not Found
@nrwl/cypress : 14.6.5
@nrwl/detox : Not Found
@nrwl/devkit : 14.6.5
@nrwl/eslint-plugin-nx : 14.6.5
@nrwl/express : Not Found
@nrwl/jest : 14.6.5
@nrwl/js : 14.6.5
@nrwl/linter : 14.6.5
@nrwl/nest : Not Found
@nrwl/next : 14.6.5
@nrwl/node : Not Found
@nrwl/nx-cloud : 14.6.2
@nrwl/nx-plugin : Not Found
@nrwl/react : 14.6.5
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.6.5
@nrwl/web : 14.6.5
@nrwl/workspace : 14.6.5
typescript : 4.7.4
---------------------------------------
Local workspace plugins:
---------------------------------------
Community plugins:

[terrymun]

@barbados-clemens Silly me, having an empty /pages directory worked.

Ideally yes, a libs folder should not have a next config in there, but if the lib is indeed re-exporting some next components (like <Link>) then it does need a next config so it will honour whatever experimental flag that is enabled.

[barbados-clemens]

looks like I forgot to add the test-dataid to the snapshots. so only the ‘old behavior’ is passing as expected in your nx-nextjs-link-behavior-demo repo. I made a PR against it so you can see the changes I made, which is to match the snapshots against what it should be so the tests fail as expected. I get the same behavior with/without using next/jest in the jest.config.ts.

only difference to not have it throw the error about the pages directory. I pass the __dirname instead of ‘./’ for the dir property.

Here is a PR so you can see what I changed. https://github.com/terrymun/nx-nextjs-link-behavior-demo/pull/1