如何解决使用 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 举报,一经查实,本站将立刻删除。