Reactjs 如何测试画布是否填充了给定的颜色？

我有一个React组件，它正在渲染canvas元素。 在该组件内部，我有以下方法：

  renderCanvas(canvas) {
    canvas.fillStyle = this.props.given_colour;
    canvas.fillRect(0, 0, 800, 800);
  }

…用于创建彩色图层

所以我在我的组件和道具中进行了调用函数的测试，它们工作得很好，但现在我想做一个场景检查，上面的方法是否使用了正确的颜色

对于测试，我使用jest与酶和sinon。 我已经准备好了这个场景：

it("calls to fill canvas with the given colour", () => {
    const canvasSpy = sinon.spy();
    const component = mount(<MyCanvas given_colour="#0000FF" />);

    component.instance().renderCanvas(canvasSpy);
    sinon.assert.calledWith(canvasSpy, "fillStyle");
    sinon.assert.calledWith(canvasSpy, "#0000FF");
    sinon.restore();
  });

it（“调用以给定颜色填充画布”，（）=>{
const canvasSpy=sinon.spy（）；
const component=mount（）；
component.instance（）.renderCanvas（canvasSpy）；
sinon.assert.calledWith（canvasSpy，“fillStyle”）；
sinon.assert.calledWith（canvasSpy，“#0000FF”）；
sinon.restore（）；
});

但是我得到了

TypeError:canvas.fillRect不是一个函数

我不知道为什么会发生这种情况，我也不确定我对这种情况的处理方法

我的期望是有一个场景可以告诉我，在这个特定的方法中，我的组件使用的是给定的颜色。但我不知道如何做到这一点。

---

我是一名Rails开发人员，我是一名新手。请有人告诉我这个测试有什么问题吗？

renderCanvas

希望

canvas

是一个有方法的对象，而它是一个函数。断言是错误的，因为

canvasSpy

被断言为使用

fillStyle

调用，而它不是

可能应该是：

const canvasMock = { fillRect: sinon.spy() };
component.instance().renderCanvas(canvasMock);
expect(canvasMock.fillStyle).to.be("#0000FF");
sinon.assert.calledWith(canvasMock.fillRect, 0, 0, 800, 800);

---

我应用了你的提示：``const canvasSpy=sinon.spy（）；const canvasMock={fillStyle:canvasSpy，fillRect:canvasSpy}；const component=mount（）；setProps（{给定颜色：{0000FF}）；component.instance（）.renderCanvas（canvasMock）；sinon.assert.calledWith（canvasMock.fillStyle，#0000FF）；`但我发现了这个错误：```AssertError:#0000FF不是一个函数104 | component.instance（）.renderCanvas（canvasMock）；>105 | sinon.assert.calledWith（canvasMock.fillStyle，#0000FF）；|```“应该是fillRect是一种方法，而不是fillStyle，”我更新了答案。考虑粘贴是因为在两个属性中意外使用了相同的<代码> CavaSpase间谍。