Testing fabric.js mouse events using Testing Library’s fireEvent

When testing fabric.js you may want to trigger events based on inputs to make sure your components or other interactions work properly.

To do this you may have or create a canvas element and then try to run mouse events on that element. The problem is the events should be triggered on the upper canvas element that fabric.js use for interactions. To properly trigger these events use canvas.upperCanvasEl instead of your canvas element.

const canvasElement = document.createElement("canvas");

// Appending to the body may be necessary for it to exist on the canvas

const canvas = new fabric.Canvas(canvasElement, { width: 640, height: 480 });

// Now let say we have a component that register events for "mouse:down",
// "mouse:move", and "mouse:down" on the fabricjs canva
render(<LineShape onFinish={jest.fn()} onCancel={jest.fn()} />);

// Use the upper canva element as the target for fireEvent
const upperCanvasEl = canvas.upperCanvasEl;
fireEvent.mouseDown(upperCanvasEl, { clientX: 20, clientY: 20 });
fireEvent.mouseMove(upperCanvasEl, { clientX: 100, clientY: 100 });
fireEvent.mouseUp(upperCanvasEl, { clientX: 120, clientY: 120 });

// then you should see those event fired properly to the canvas

// in this example LineShape adds a line when we do
// "mouse:down" and when "mouse:up" we are done creating the line

const obj = canvas._objects[0];