如何解决在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 举报,一经查实,本站将立刻删除。