Next.js v12 compatibility

[toomuchdesign]

🐛 Bug Report

As this PR shows, next-page-tester has issues with Next.js v12. At a first sight I found:

• some types issues
• an unexpected segmentation fault error while running tests

I can't predict when I'll be able to work on it. As usual contributions are very welcome 🙌

Reproduction

#280

[movahedan]

I don't know if it is the exact issue you mentioned here or not,
I get this Segmentation fault (core dumped) when I'm trying to test my pages after upgrading to next@12.0.2

This is my test:

        it('page renders and matches snapshot', async () => {
		const { serverRenderToString, render } = await getPage({
			route: '/_error',
		});

		// check correctness of SSR result
		const { html } = serverRenderToString();
		expect(html).toMatchSnapshot();

		// check hydrated app
		const { nextRoot } = render();
		expect(nextRoot.outerHTML).toMatchSnapshot();
	});

This information could be useful:

"next": "^12.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"jest": "^27.1.0",
"babel-jest": "^27.1.0",

[toomuchdesign]

Hi @movahedan,
thanks for your feedback. Yep I also got a similar error. I suspect the cause of it might be some Next.js internal refactor.

[GheorgheP]

I have the same issue. Tested with a clean app created using yarn create next-app.

End up with error:

Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)

[calbrecht]

Maybe it has to do with nodejs/node#40602. Debugging into await loadConfig where it tries to load the next.config.js file by calling await import is leading to the segfault.

--edit Probably more adequate issue because nodejs/node#35889 is mentioning jest as well.

[calbrecht]

vercel/next.js#29935 seem to have caused it and the followup vercel/next.js#29971 mentions the segfault on node 14 for other platforms than linux. However, the platform i am experiencing this behaviour is a NixOS with node 16.13.0.

--edit Oh gosh. It's a deep rabbit hole that goes far beyond the time i am willing to spend right now.
Managed to get that far that when converting the next.config.js to esm module syntax and running jest with node v17 and --experimental-vm-modules it will segfault less reliably (meaning every other to third run) but then more issues arise like it starts complaining about missing context.locale and what not.

--edit--edit The overall picture seems to be that there are issues running esm dynamic imports in nodes vm module (therefore the experimental flag) and jests usage of that vm module, probably being multiplied by mixing cjs and esm module loading in tests dependencies but this again is wildly speculative.

[braccolucianoj]

Hello, I ran into the same issue and I was able to fix using jest moduleNameMapper. The issue it's related to the default function exported from this file next/dist/server/config. Also since next-page-tester doesn't use the Function attributes exported form next config, this import can be easily "mocked" by just exporting the serialized representation of a result of a dev run of the configuration.

So in jest.config file add an entry on the moduleNameMapper 'next/dist/server/config': 'path/to/mocked/next/config/loader.js and on this file add the object as export default () => (configObject)

That worked for me! Hope this helps

[dbehmoaras]

Maybe this is also an issue with Next 12. Next-page-tester's render method does not render anything and ignores assertions. The test just simply stops running after invoking the render method.

[jasonwilliams]

@toomuchdesign is there anything we can do to help?

[toomuchdesign]

Hi @jasonwilliams, unfortunately in the near future I won't be able to spend time on next-page-tester. I've opened #290 to discuss a way to proceed further.

[jasonwilliams]

@toomuchdesign do you know why v12 doesn’t work? I think we can sort out a fork and fix it but in this thread I’m keen to know why it stopped working in this release.

[toomuchdesign]

Unfortunately I haven't had the opportunity to dig into Next 12 changes.

[jasonwilliams]

I hope to take a look at this again soon, but won’t be for a while. If anyone has any useful info feel free to add here. From looking at the upstream issues it seems node hasn’t fixed the segfaults

[jasonwilliams]

There's a new PR open for this. The type errors have been sorted for now #294 Will need help deciding what to do about Jest though.

I wonder if switching to Vitest would help solve this. Thoughts @calbrecht @Meemaw ?

[jasonwilliams]

Just to update everyone on what's going on here..

The segfaults look to be coming from a mix of require and import, plus the way Jest operates.
Considering Jest is not getting supported much anymore we will need a long term plan to move away from Jest completely. That being said, we can most likely patch what we currently have to have a working Next 12 branch.

How can I help?

Short Term

The short term fix is to resolve the Type Issues and segfaults in Jest tests. This is #294

It looks like we've fixed the main issue by swapping to import in some places. The case here is to try and test this PR out and give feedback. If we can get something out without breaking other test runners that would be good to know.

Long Term

The long term fix is to migrate to Vitest. The PR is here #295
You can help by checking that out and testing.

Do you use something other than Jest?

Your help is needed in #294

[IGassmann]

@jasonwilliams it's too early for concluding that Jest won't be supported anymore. Considering how popular is the package, it's likely that someone else or another organization might start leading its contributions.

Worth noting that Vitest is still in development and it isn't yet stable as per their own documentation, and Jest has still 300 times more weekly downloads. Next.js documentation also still only points into the direction of using Jest.

[jasonwilliams]

@IGassmann you're right, this isn't about dropping support for Jest per-say. But providing us a path to move forward and not being blocked by what's happening with Jest.

Internally this could change its test suite and still work with other test runners people use. It's true Vitest is in development right now, but the support for native ESM Modules is a direction we want to head in, so building against that works quite nicely right now.

[toomuchdesign]

Hi @jasonwilliams. have you had the opportunity to get what is exactly causing the esm/commonjs hell? Was setting the __NEXT_TEST_MODE flag enough?

I tried to understand more about the nature of the issue and found this article very well written.

[jasonwilliams]

Hey everyone
We have a version which should work on Next v12 but we want to roll it out as a beta first to catch any potential bugs.

You can install it by using either:

• next-page-tester@beta
• next-page-tester: 0.31.0-beta.0

Please feedback and let us know how it works for you

[toomuchdesign]

Hi Everybody,
I've actually skipped beta release and published v0.31 directly. 🚢