next.js - NextJS useRouter 関数を使用した Cypress コンポーネントのテスト

Question

私の Navbar コンポーネントは、アクティブなリンクのスタイルを設定するために、useRouterによって提供される関数に依存しています。nextjs/router

Cypress を使用してこの動作をテストしようとしていますが、どのように構成すればよいかわかりません。サイプレスは気に入らないようgetRoutePathname()で、私のテスト環境では undefined が返されます。

テストしようとしているコンポーネントは次のとおりです。

import Link from 'next/link'
import { useRouter } from 'next/router'

function getRoutePathname() {
  const router = useRouter()
  return router.pathname
}

const Navbar = props => {
  const pathname = getRoutePathname()

  return (
    <nav>
      <div className="mr-auto">
        <h1>Cody Bontecou</h1>
      </div>
      {props.links.map(link => (
        <Link key={link.to} href={link.to}>
          <a
            className={`border-transparent border-b-2 hover:border-blue-ninja 
            ${pathname === link.to ? 'border-blue-ninja' : ''}`}
          >
            {link.text}
          </a>
        </Link>
      ))}
    </nav>
  )
}

export default Navbar

Cypress コンポーネント テスト ランナーのスケルトン セットアップがあり、ハードコーディングしたときにコンポーネントをロードできましたpathnameが、一度依存するuseRouterと、テスト ランナーは満足しなくなります。

import { mount } from '@cypress/react'

import Navbar from '../../component/Navbar'

const LINKS = [
  { text: 'Home', to: '/' },
  { text: 'About', to: '/about' },
]

describe('<Navbar />', () => {
  it('displays links', () => {
    mount(<Navbar links={LINKS} />)
  })
})