How to test react konva from cypress?

Question

I have rectangles as screens on canvas using react-konva. How to test clicking the screens rectangle on testing tools like cypress that uses DOM Element to select the target element?

I am seeing that this is impossible, unless by creating screens DOM Element for testing purpose apart of what currently exists on the canvas. Somehow this will take a lot of time and cumbersome too.

So I wonder if we have a way to work around this to test objects that are drawn inside canvas itself?

Answer 1

Take a look into Konva testing code. Like https://github.com/konvajs/konva/blob/master/test/functional/MouseEvents-test.js

You can emulate clicks with this code (from 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 });

But you have to find a way to access the stage instance for such testing. And I am not sure it is good in a cypress way, because its API is abstract and DOM-based.

Or you can try to trigger events with cypress:

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