Cypressのコンポーネントテストで、"next/navigation"のuseRouterを使ったコンポーネントで"invariant expected app router to be mounted"と言われたら

Cypressを使ってNext.jsのコンポーネントテストを行っていたとき、
"next/navigation"のuseRouterを使っていたコンポーネントで、
"invariant expected app router to be mounted"
というエラーが返ってきました。

そういう時の対処法を探していたところ、Storybookでの対処方法が以下で紹介されており、その方法でCypressでも対処可能でした。

↓参考にさせていただいたサイト

Next.jsから　AppRouterContext を呼び出し、以下のようにテストしたいコンポーネントを囲ってあげれば、エラーを回避してテストできました。

import {
  AppRouterContext,
  type AppRouterInstance
} from "next/dist/shared/lib/app-router-context.shared-runtime";
import TestComponent from "..";

it("Test Component", () => {
  cy.mount(
    <AppRouterContext.Provider value={{} as AppRouterInstance}>
      <TestComponent />
    </AppRouterContext.Provider>
  );
})

ご参考になりましたら幸いです。