Test page rendering (visually) for next.js jest-CodePudding

Is there a way to test how the page render in next.js?

Not by comparing the html, but the actual images. So far I only found a way to "render" the component into a html (tags tree) with 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()
})

But there is no information on how to do this with the actual rendering and real images.

At the very end I want to be able to compare the current image to the reference with pixel-perfect accuracy. Is it possible?

CodePudding user response：

You want to look for tools to do visual testing. Generally the setup is such that you run the test once, it creates screenshots, and then when you run it later again it compares against those screenshots to see if any regression occurred.

This person explains a setup with a nextJs app, cypress and applitools