如何设置 react-chartjs-2 组件的视觉回归答案

【问题标题】：How to set up Visual Regression of react-chartjs-2 component如何设置 react-chartjs-2 组件的视觉回归
【发布时间】：2022-01-28 12:28:02
【问题描述】：

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

这是我目前正在测试的。我基本上将这篇博文example 与react-chartjs-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();
});

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

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

【问题讨论】：

标签： jestjs react-testing-library jsdom react-chartjs

【解决方案1】：

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

记住这一点，看看jsdom-screenshot 是如何渲染图像的（来自方法的解释）：

我们使用 jsdom 来获取我们想要截屏的 HTML 的状态。消费者可以使用 jsdom 轻松让组件进入他们想要截屏的状态。 jsdom-screenshot 然后在那个时刻（那个状态）使用标记（“HTML”）。 jsdom-screenshot 启动本地网络服务器并将获得的标记作为 index.html 提供。它进一步服务通过 serve 提供的资产，以便加载本地资产。然后 jsdom-screenshot 使用 puppeteer 截图使用无头谷歌浏览器对该页面进行截图。

当您调用generateImage() 时，您发布的HTML（只是一个空的canvas 元素）被复制到一个文件index.html 中，在Puppeteer 中打开，然后截取屏幕截图。因为canvas 元素不将其内容包含在其标记中，所以当 HTML 被复制到文件中时，图表会丢失。

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

我建议您查看jest-puppeteer，它在 Puppeteer 中运行您的整个测试套件。它将使用实际的 Chromium DOM 实现，而不是使用虚拟化 DOM 实现 jsdom，它具有更接近运行时使用的额外好处。您可以使用page.screenshot() 截取图表的屏幕截图，与浏览器中显示的完全一样，并提供完整的 DOM 支持（包括canvas）。查看jest-puppeteer README 以开始使用。

【讨论】：