如何测试柏树的反应康瓦？

【问题标题】：How to test react konva from cypress?如何测试柏树的反应康瓦？
【发布时间】：2019-07-29 00:35:16
【问题描述】：

我使用 react-konva 将矩形作为画布上的屏幕。如何在 cypress 等使用 DOM Element 选择目标元素的测试工具上测试点击屏幕矩形？

我看到这是不可能的，除非通过创建屏幕 DOM 元素来进行测试，而不是画布上当前存在的内容。不知何故，这将花费大量时间并且也很麻烦。

所以我想知道我们是否有办法解决这个问题来测试在画布内部绘制的对象？

【问题讨论】：

标签： cypress konvajs react-konva

【解决方案1】：

查看Konva 测试代码。赞https://github.com/konvajs/konva/blob/master/test/functional/MouseEvents-test.js

您可以使用此代码模拟点击（来自here）：

Konva.Stage.prototype.simulateMouseDown = function(pos) {
  var top = this.content.getBoundingClientRect().top;

  this._mousedown({
    clientX: pos.x,
    clientY: pos.y + top,
    button: pos.button || 0
  });
};


// the use it:
stage.simulateMouseDown({ x: 10, y: 50 });

但是您必须找到一种方法来访问此类测试的阶段实例。而且我不确定它是否以柏树的方式好，因为它的 API 是抽象的和基于 DOM 的。

或者你可以尝试用 cypress 触发事件：

cy.get(`.container > div`)
        .trigger('mousedown', { clientX: x, clientY: y })

【讨论】：