测试 next.js + jest 的页面渲染（视觉）答案

【问题标题】：Test page rendering (visually) for next.js + jest测试 next.js + jest 的页面渲染（视觉）
【发布时间】：2022-01-01 10:57:28
【问题描述】：

有没有办法测试页面在 next.js 中的呈现方式？

不是通过比较html，而是通过实际图像。到目前为止，我只找到了一种使用toJSON() 将组件“渲染”为 html（标签树）的方法：

import React from 'react'
import TestRenderer from 'react-test-renderer'
import Index from './index'

it(`should render`, () => {
    const testRenderer = TestRenderer.create(<Index/>)

    expect(testRenderer.toJSON()).toMatchSnapshot()
})

但没有关于如何使用实际渲染和真实图像执行此操作的信息。

最后，我希望能够以像素完美的精度将当前图像与参考图像进行比较。有可能吗？

【问题讨论】：

标签： testing jestjs next.js

【解决方案1】：

您想寻找进行可视化测试的工具。通常设置是，您运行一次测试，它会创建屏幕截图，然后当您稍后再次运行它时，它会与这些屏幕截图进行比较以查看是否发生任何回归。

此人 explains 设置了 nextJs 应用程序，cypress 和 applitools

【讨论】：