reactjs - 如何使用 Next JS 中的链接测试路由?

标签 reactjs jestjs next.js react-testing-library

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

最佳答案

为了能够使用 jsdom 呈现您的 Next.js 页面,您可以使用 next-page-tester .这是一个相当新的库,所以文档并不多,也不是所有东西都受支持,但 README 中有一个使用示例。
另一种选择是使用端到端测试而不是 jsdom。这是一个较慢的选择,但一切都会正确呈现。

关于reactjs - 如何使用 Next JS 中的链接测试路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66003556/

相关文章:

next.js - 如何使非英语网址在 next.js 中工作?

javascript - NextJS 无法识别 TypeScript 文件

css - Draft.js 更改默认等宽字体

reactjs - 如何使用 Jest 和 enzyme 来模拟导入的 React 高阶组件?

javascript - 为什么当不需要分号时我的 app.js 文件中会出现错误 ';'?

reactjs - 使用与 typescript react 的 Jest 测试复制到剪贴板方法

unit-testing - 使用 jest 和 vue-test-utils2 在 vue3 typescript 单元测试中模拟 axios (已解决)

reactjs - 使用返回类型为 NextPage 的函数时出现类型错误

javascript - 如何获取正在运行 React 应用程序的当前域名

javascript - 如何渲染 react 组件