在React中对canvas进行测试时，为什么这些dataUrl不匹配

问题描述

我正在尝试测试React中绘制到画布上的内容。为了使进行实际测试的代码更具可测试性，我将绘图功能分成了自己的模块；这是要测试的功能：

const drawLine = (
  colour: string,ctx: CanvasRenderingContext2D,linewidth: number,x: number,y: number
): void => {
  ctx.linewidth = linewidth;
  ctx.strokeStyle = colour;
  ctx.beginPath();
  ctx.moveto(x,0 - y);
  ctx.lineto(x,y);
  ctx.lineto(x,0);
  ctx.closePath();
  ctx.stroke();
};

所以我要做的就是在传递给函数的位置画一条线。这是我的测试：

describe("drawLine()",() => {
  it("should draw a line on the passed canvas",() => {
    const expectedDataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAvUlEQVRoQ+2UsQrDMBQDn/PjpT8eh5QMXYrgQEs5LxkcyfZJvDWltWfWzJxf9nvNHKXjPodVlg+BWE0kgbNaidCPfauVwFmtRMhqQUJWC4JzaiVwVisRcmpBQlYLgnNqJXBWKxFyakFCVguCc2olcE+1Xs9/+/6umXfS0f1aIvRCVOdDKLmWzkRaZKmviVByLZ2JtMhSXxOh5Fo6E2mRpb4mQsm1dCbSIkt9TYSSa+lMpEWW+poIJdfS/U0iF2DKTjOpfMGFAAAAAElFTkSuQmCC";
    const Canvas = () => <canvas data-testid="test-canvas" width="50" height="50"></canvas>;
      render(<Canvas />);

    const canvas = screen.getByTestId("test-canvas") as HTMLCanvasElement;
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
    drawLine("red",ctx,4,25,25);

    // Don't match - why?
    const dataUrl = canvas.toDataURL();
    expect(dataUrl).toEqual(expectedDataUrl);

    cleanup();
  });
});

expectedDataUrl只是画布中红线的字符串表示形式，这就是我要传递给函数的内容。但这失败了，当我打印出canvas.toDataURL();的结果时，它会打印出来：

所以我可以看到画布上没有任何内容。我知道使用jest-canvas-mock会正确调用该函数，并且可以看到ctx函数已正确调用。

关于canvas元素数据url我缺少什么，或者这是测试这种东西的错误方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）