Making next/router and next/link more testable

[scottrippey]

I'd love to discuss how we could work together to make Next apps more testable.

I’ve been working on next-router-mock, which helps tests to mock next/router and next/link. However, there’s some difficulty in mocking these modules, and the workarounds all rely on internal paths, which frequently change between Next releases.

I'm sure we can create a solution to make this easily preventable.

Some examples:

• Mocking "dynamic routes" depends on several internal Next modules (eg. shared/lib/router/utils and others)
  • https://github.com/scottrippey/next-router-mock/blob/main/src/dynamic-routes/next-12.ts#L1-L9
• Mocking in Storybook depends on the shared/lib/router-context module, which has changed paths in past releases
  • https://github.com/scottrippey/next-router-mock/blob/main/src/MemoryRouterProvider/next-11.tsx
• Mocking next/link broke in v12.2.0 because it now uses a Context instead of the router singleton
  • Issue with next/link in Next >12.2.0, 13.* scottrippey/next-router-mock#58

I would love to discuss ways to work together to help minimize these kinds of breaking changes. There are a lot of folks using next-router-mock to unit-test their Next application, and I'd love to make sure these folks are not hindered from upgrading to the latest versions of Next!

[fmacherey]

For documentation here my issue #38230 regarding the problem with 12.2.0 which broke my tests to. But your package helped me so far.

[scottrippey]

The issue boils down to 2 path-based problems.

1. It's hard for a user to override next/router because next/link imports from internal paths
2. It's hard for next-router-mock to support path-based routing, because it relies Next's internal ./router/utils modules

So I'd like to suggest a 2-part solution.

1. Can next/link import directly from the top-level next/router path?
2. Can Next export its utils via next/router/utils? This would allow the internal implementations and file structure to remain internal, but would provide a way for next-router-mock to import those utils.

[phcoliveira]

How about Next.JS provide a router-mock itself under next/test-support along with any other mock necessary to unit test their hardcore features?

[simonedavico]

I would expect frameworks such as Next.js to start treating testing as a first-class citizen in their API layer. It is really sad that there is no official support regarding testing common use cases such as navigation. Props to @scottrippey for investing his own time into such a huge effort.

[tar-aldev]

100%. Sometimes it feels like testing is not taken seriously at all. With cypress component testing it even a bigger nightmare...

Like it's not possible to cy.stub next/navigation or some other packages... Very frustrating and annoying...