I started running errors (shown below) when I used the useRouter from 'next/navigation' in my Next.js 14.2.5 (with /app router) application. I tried to set up a nextMount command in accordance with this guide but I can’t get it to work: https://www.cypress.io/blog/component-testing-next-js-with-cypress

That guide seems to be more /pages router not /app router. How do I set up a mount command that can use the next/navigation useRouter hook in a /app router app?

That guide seems to be suggesting that I should add JSX code to the cypress/support/component.ts file, .ts files can’t have JSX syntax…?

Any direction would be greatly appreciated :pray:

viewport375, 667
(uncaught exception)Error: invariant expected app router to be mounted
(uncaught exception)Error: invariant expected app router to be mounted
(uncaught exception)Error: invariant expected app router to be mounted
Error
The following error originated from your application code, not from Cypress.

> invariant expected app router to be mounted

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: on route