使用 React-testing-library 测试时出现 Next.js 路由器错误

Question

我只是想对渲染一个根据登录状态重定向用户的组件进行初步测试，从而使用routerfrom next/routerincomponentDidMount但出现以下错误：

未找到路由器实例。您应该只在应用程序的客户端内使用“next/router”。

在我看来，从客户端来看，这意味着必须在渲染方法内部使用路由器或链接，因为这使得 DOM 和其他方法（如生命周期、钩子和服务器端）在这些情况下并非如此它会抛出一个错误。

我知道测试整个组件超出了单元测试的目的，但无论如何我想这样做。因此，我遵循了这个讨论，看来必须模拟路由器才能被React-Testing-Library使用，但没有一个解决方案对我有用。

这是我尝试过的代码：

describe('Home Page', () => {
  it('renders without crashing', async () => {
    render(<Home />)
  })
})

Answer 1

像这样的解决方案：

import { useRouter } from 'next/router'
...
jest.mock('next/router', () => ({
    useRouter: jest.fn(),
}))
...
;(useRouter as jest.Mock).mockImplementation(() => ({
    pathname: '/',
    push: mockPush,
}))

将工作。

如果您不在初始模拟中模拟 useRouter （即：

...
jest.mock('next/router')
...