react-testing-library - 如何使用 HTML5 Canvas 对 React 组件进行图像快照测试？

Question

我正在尝试使用呈现 HTML5 Canvas 的 React 组件进行图像快照测试(即，不是 模拟)。我正在使用 Jest、React 测试库、Node Canvas、Puppeteer 和 Jest Image Snapshot。

给定以下 React 组件的 render():

  public render(): React.ReactElement<TestCanvas> {
    const { innerWidth, innerHeight } = window;

    return (
      <div id="canvas" style={{ height: `${innerHeight}px`, width: `${innerWidth}px` }}>
        <canvas ref={this.canvasRef} />
      </div>
    );
  }

Jest 测试可能是这样的:

  it('should render a <TestCanvas/> component', async () => {
    const { container } = render(<TestCanvas />);

    const page: puppeteer.Page = await browser.newPage();
    await page.setContent(container.outerHTML);
    const image: string = await page.screenshot();

    expect(image).toMatchImageSnapshot();
  });

但是，此测试会生成一个空的白色 800x600 PNG 图像作为基准。

但是，如果我将测试更改为:

  it('should render a <TestCanvas/> component', async () => {
    const { container } = render(<TestCanvas />);

    const canvas: HTMLCanvasElement = container.querySelector('canvas') as HTMLCanvasElement;
    const img = document.createElement('img');
    img.src = canvas.toDataURL();

    const page: puppeteer.Page = await browser.newPage();
    await page.setContent(img.outerHTML);
    const image: string = await page.screenshot();

    expect(image).toMatchImageSnapshot();
  });

它根据我的 React 组件生成基线 PNG 快照就好了。

我目前正在尝试调试管道中出现问题的地方。

Answer 1

我用不使用puppeteer的方法做过html5 canvas图片快照，但是puppeteer的方法很有意思。这是我使用的方法

  test('canvas image snapshot', async () => {
    const { getByTestId } = render(
      <MyComponent />,
    )

    const canvas = await waitForElement(() =>
      getByTestId('mycanvas'),
    )

    const img = canvas.toDataURL()
    const data = img.replace(/^data:image\/\w+;base64,/, '')
    const buf = Buffer.from(data, 'base64')
    // may need to do fuzzy image comparison because, at least for me, on
    // travis-ci it was sometimes 2 pixel diff or more for font related stuff
    expect(buf).toMatchImageSnapshot({
      failureThreshold: 0.5,
      failureThresholdType: 'percent',
    })
  })

使用https://github.com/americanexpress/jest-image-snapshot对于 toMatchImageSnapshot