测试next.js+jest的页面呈现(可视化)

Question

有没有一种方法可以测试页面在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()
})

但目前还没有关于如何在实际渲染和真实图像中做到这一点的信息。

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

Answer 1

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

这个人解释了使用nextJs应用程序、柏树和appletools 的设置