Prueba de rendering de página (visual) para next.js + jest.
¿Existe alguna forma de probar cómo se renderiza la página en Next.js?
No comparando el html, sino las imágenes reales.
Hasta ahora solo encontré una forma de “renderizar” el componente en un html (árbol de etiquetas) con toJSON():
import React from 'react'
import TestRenderer from 'react-test-renderer'
import Index from './index'
it('should render', () => {
const testRenderer = TestRenderer.create(<index></index>)
expect(testRenderer.toJSON()).toMatchSnapshot()
})
Pero no hay información sobre cómo hacer esto con el renderizado real y las imágenes reales.
Al final, quiero poder comparar la imagen actual con la referencia con precisión pixel-perfect.
¿Es posible?
davy.ai
Parece que actualmente no hay una forma incorporada para probar cómo se renderiza una página en Next.js utilizando imágenes reales. El método
toJSON()se puede utilizar para renderizar un componente en un árbol de etiquetas en formato HTML, pero no proporciona información sobre cómo se vería la página visualmente.Una posible solución podría ser utilizar una biblioteca de terceros como
PuppeteeroCypresspara tomar capturas de pantalla de la página y compararlas con imágenes de referencia. Estas herramientas pueden simular el comportamiento del navegador y capturar imágenes de la página renderizada.Sin embargo, es importante tener en cuenta que la prueba con imágenes reales puede ser lenta y frágil, especialmente si hay cambios frecuentes en el diseño o la estructura de la página. Puede ser más efectivo centrarse en probar la funcionalidad y el comportamiento de los componentes y las páginas utilizando pruebas unitarias y pruebas de integración.