How to set up Visual Regression of react-chartjs-2 component

Question

I am trying to set up visual regression testing for react-chartjs-2 components with React Testing library. However, all of the snapshots that are being generated are blank, but the component renders properly in the browser.

This is what I'm currently testing. I basically combined this blog post example with the pie chart example from 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();
});

I am wondering if it's a timing issue. Running debug() before the expect shows a canvas with 0 width and height:

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

score 3 · Answer 1 · answered Jan 28 '22 at 04:28

The charting library you're using, react-chartjs-2, wraps chart.js, which relies on the canvas element to render charts to the screen. It's important to note that canvas contents are not part of the DOM, but are instead rendered virtually on top of a single DOM canvas element.

Keeping that in mind, take a look at how jsdom-screenshot renders images (from the explanation of method):

We use jsdom to obtain the state of the HTML which we want to take a screenshot of. Consumers can use jsdom to easily get components into the state they want to take a screenshot of. jsdom-screenshot then uses the markup ("the HTML") at that moment (of that state). jsdom-screenshot launches a local webserver and serves the obtained markup as index.html. It further serves assets provided through serve so that local assets are loaded. Then jsdom-screenshot uses puppeteer to take a screenshot take screenshots of that page using headless Google Chrome.

When you call generateImage(), the HTML you posted (just an empty canvas element) is copied into a file, index.html, opened in Puppeteer, then a screenshot is taken. Because canvas elements don't include their contents in their markup, when the HTML is copied into a file the chart is lost.

In short, jsdom-screenshot does not support drawing on canvas elements.

I would recommend checking out jest-puppeteer, which runs your entire test suite inside of Puppeteer. Instead of using a virtualized DOM implementation jsdom, it will use the actual Chromium DOM implementation, which has the added benefit of functioning closer to runtime usage. You can use page.screenshot() to take a screenshot of the chart exactly as it appears in-browser, with full DOM support (canvas included). Check out the jest-puppeteer README to get started.

How to set up Visual Regression of react-chartjs-2 component

1 Answers1