如何在 Next JS 中测试链接的路由？

Question

我是 NextJS 环境的初学者，我正在从常见的 ReactJS 迁移应用程序。这是对另一个页面链接的简单测试。那么，我应该如何重构我的测试？

*我正在使用 Jest 和测试库。

// My current code in ReactJS
test('Should go to Post page', () => {
        const post = mockPostModel()
        const history = createMemoryHistory({ initialEntries: ['/'] })
        render(
            <Router history={history}>
                <BlogPost post={post} />
            </Router>
        )
        fireEvent.click(screen.getByTestId('link'))
        expect(history.location.pathname).toBe(`/post/${post.title}`)
    })

Answer 1

为了能够使用 jsdom 渲染 Next.js 页面，您可以使用next-page-tester。这是一个相当新的库，因此没有很多文档，也不是所有内容都受支持，但自述文件中有一个使用示例。

另一种选择是使用端到端测试而不是 jsdom。这是一个较慢的选项，但一切都会正确渲染。