如何在 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。这是一个相当新的库，因此文档不多，也不是所有内容都受支持，但 README 中有一个使用示例。

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