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

Posted 2023-02-22

【中文标题】如何在 Next JS 中使用链接测试路由？

【英文标题】：How test routing with links in Next JS?

【发布时间】：2021-05-06 06:29:03

【问题描述】：

我是 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`)
    )

【参考方案1】：

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

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

【讨论】：

感谢您的帮助，但这不是我想要的方法。我想测试独立的组件，比如我的标题、按钮等。