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

Question

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

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

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

Answer 1

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

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

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 })