Unsure how to mock canvas element for unit tests

[soadzoor]

I'm trying to use skia-canvas to have proper unit-tests for some of our canvas-2d related features with jest. Unfortunately, when I import it, this is what I get:
Test suite failed to run

ReferenceError: TextEncoder is not defined

  1 | import {Canvas} from "skia-canvas";
> 2 |
  3 | ^

What am I missing?

[samizdatco]

The TextEncoder global is only used in the in-browser polyfill of the Skia Canvas-specific extensions like canvas.saveAs(), loadImage(), etc. I'm not sure why the web version is being included in your unit tests; are you bundling it for the browser as part of your build process?

[soadzoor]

The TextEncoder global is only used in the in-browser polyfill of the Skia Canvas-specific extensions like canvas.saveAs(), loadImage(), etc. I'm not sure why the web version is being included in your unit tests; are you bundling it for the browser as part of your build process?

I have a browser-application, and I have unit tests for it. The tests include things like "document.createElement", and other browser-env related stuff, so I need to use "jsdom" environment on the "jest" side.

Are you saying that Skia Canvas is only supposed to work in the "node" environment?

[samizdatco]

Are you saying that Skia Canvas is only supposed to work in the "node" environment?

Right, Skia Canvas is an emulation/extension of the canvas API for Node (which doesn't have a built-in canvas the way the browser environment does). In the browser you can just use the <canvas> element. The existence of the browser.js file in the project is just to allow for re-use of code that depends on Skia Canvas's extensions.

[soadzoor]

Are you saying that Skia Canvas is only supposed to work in the "node" environment?

Right, Skia Canvas is an emulation/extension of the canvas API for Node (which doesn't have a built-in canvas the way the browser environment does). In the browser you can just use the <canvas> element. The existence of the browser.js file in the project is just to allow for re-use of code that depends on Skia Canvas's extensions.

How is one supposed to write unit tests for their frontend applications that includes canvas functionalities, then? 😭

[soadzoor]

I don't want to "ruin anyone's business", but I stumbled upon @napi-rs/canvas, and with that, it seems all my problems are gone now.

Thank you anyway