1

我的导航栏组件依赖于useRouter提供的函数nextjs/router来设置活动链接的样式。

我正在尝试使用赛普拉斯测试这种行为，但我不确定我应该如何组织它。getRoutePathname()在我的测试环境中，赛普拉斯似乎不喜欢并且未定义返回。

这是我要测试的组件：

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

我有赛普拉斯组件测试运行器的骨架设置，并且在我硬编码时能够加载组件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} />)
  })
})
4

0 回答 0