使用 NextJS useRouter 函数测试 Cypress 组件

问题描述

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

我正在尝试使用 Cypress 测试这种行为，但我不确定我应该如何组织它。 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} />)
  })
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）