next.js + jest 测试页面渲染（视觉上）

Question

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

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

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

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

这个人explains a setup with a nextJs app, cypress and applitools

next.js + jest 测试页面渲染（视觉上）

Test page rendering (visually) for next.js + jest

testing

jestjs

next.js