We need a component test recipe for working with next/navigation in next 13+

[muratkeremozcan]

What would you like?

The next12 example from Mike Plummer is nice, but needs to be updated for next13
https://github.com/mike-plummer/nextjs-cypress-ct-example/blob/9110384cc8a2fad869104ffb0c75b92990fb3e5b/cypress/support/component.js#L37

We need a way to make useRouter() work in a component test with next 13+.

This lib may be promising, https://www.npmjs.com/package/next-router-mock
but they do not have support for next13+ yet scottrippey/next-router-mock#103.

I have a spot next13 example this need can be reproduced at.
https://github.com/muratkeremozcan/next-app-mosh/blob/b7fbcc5694ebd40fd8145b683f3c7de3fa1549b8/app/users/new/pageNewUserPage.cy.tsx#L4

Why is this needed?

Because we need docs and recipes to use Cypress features with the new tech.

Other

No response

[scottrippey]

Hi, I'm the developer for next-router-mock, and also a big fan of Cypress and Component testing.

I'm eager to get Next 13 support, and I've started a PR to add this support (as linked above). But since I'm not currently working on a Next 13 project, my knowledge and need for App Router support is not high.

I'd be thrilled to get help on this, so if you're interested in submitting a PR, please do.

And, so far, I've only added docs around using Storybook for component testing. If there's anything that Cypress Component tests need, please let me know, whether it's a feature or just docs.

[jennifer-shehane]

Moving to documentation repo since this is a documentation concern