如何设置react-chatjs-2组件的可视化回归

Question

我正在尝试使用react测试库为react-chattjs-2组件设置可视化回归测试。但是，正在生成的所有快照都是空白的，但组件在浏览器中正确渲染。

这就是我目前正在测试的内容。我基本上将这个博客文章示例与react-chattjs-2中的饼图示例结合在一起。

import React from 'react';
import {generateImage, debug} from 'jsdom-screenshot';
import {render} from '@testing-library/react';
import {Pie} from "react-chartjs-2";
it('has no visual regressions', async () => {
window.ResizeObserver =
window.ResizeObserver ||
jest.fn().mockImplementation(() => ({
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
}));
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
};
render(<div><Pie data={data}/></div>)
expect(await generateImage()).toMatchImageSnapshot();
});

我想知道这是不是时间问题。在预期之前运行debug()显示一个宽度和高度为0的画布：

<canvas
height="0"
role="img"
style="display: block; box-sizing: border-box; height: 0px; width: 0px;"
width="0"
/>

Answer 1

您正在使用的图表库react-chartjs-2包装chart.js，它依赖于canvas元素将图表呈现到屏幕上。需要注意的是，画布内容不是DOM的部分，而是虚拟地呈现在单个DOMcanvas元素之上。

记住这一点，看看jsdom-screenshot是如何渲染图像的(从方法的解释(：

我们使用jsdom来获取我们想要截图的HTML的状态。消费者可以使用jsdom轻松地使组件进入他们想要截图的状态。jsdom屏幕截图然后使用当时(该状态(的标记("HTML"(。jsdom截图启动本地Web服务器，并将获得的标记作为index.html提供。它进一步服务于通过serve提供的资产，以便加载本地资产。然后jsdom屏幕截图使用puppeteer进行屏幕截图使用无头谷歌Chrome对该页面进行屏幕截图。

当您调用generateImage()时，您发布的HTML(只是一个空的canvas元素(被复制到一个文件index.html中，在Puppeter中打开，然后进行屏幕截图。由于canvas元素的标记中不包含其内容，因此当HTML复制到文件中时，图表将丢失。

简而言之，jsdom-screenshot不支持在canvas元素上绘制。

我建议你去看看小丑木偶师，它在木偶师中运行你的整个测试套件。它将使用实际的Chromium DOM实现，而不是使用虚拟化的DOM实现jsdom，这具有更接近运行时使用的功能的额外好处。您可以使用page.screenshot()在完全支持DOM(包括canvas(的情况下，完全按照浏览器中显示的方式拍摄图表的屏幕截图。查看jest-puppeteer自述文件开始阅读。