Mock canvas

[regenrek]

Hi,

I apologize for now since this is out of scope according to #274
but I'm struggling to mock or use the canvas in combination with jsdom and vitest.

I've tried using
jest-canvas-mock and
node-canvas

in setupFiles vite.config.ts. But no luck here.
I try to test a https://konvajs.org project

Any tips or repos where I could look for a solution?

Thank you.
Regards

[sheremet-va]

Did you configure your setupFiles correctly? Did you check if it runs? According to source code of jest-canvas-mock, it should just work

[regenrek]

I build a quick reproduce repo:

https://stackblitz.com/edit/github-wpyfol?file=test/canvas.test.ts

The first issue is that it mock-canvas has jest dependencies. I tried to rewrite them to vi but I got stuck here too.

[regenrek]

Awesome! This solution is pretty clever.

All tests are green including konva composable. I've updated the repo + stackblitz project for future references.

Thank you!

Regards

[cexbrayat]

@sheremet-va It looks like this workaround does not work with Vite 4.3:

ReferenceError: jest is not defined
 ❯ Object.<anonymous> node_modules/jest-canvas-mock/lib/mock/createImageBitmap.js:9:16

Is there a change that would make global.jest = vi behave differently in v4.3?

[sheremet-va]

Yes, all imports are hoisted now. You can move everything in a separate file and import it with await import syntax (you can also just import related files that way in the same setup file - a separate file is only useful if you have a lot of imports). In the next version there will be vi.hoisted method to support running code before imports.

[Johannes-Schiel]

do you have an example for that ?

[bcjohnblue]

As @sheremet-va said, use await import can solve the hoisted problem.

// jest-canvas-mock.js
import getCanvasWindow from 'jest-canvas-mock/lib/window';
const apis = [
  'Path2D',
  'CanvasGradient',
  'CanvasPattern',
  'CanvasRenderingContext2D',
  'DOMMatrix',
  'ImageData',
  'TextMetrics',
  'ImageBitmap',
  'createImageBitmap',
] as const;

const canvasWindow = getCanvasWindow({ document: window.document });

apis.forEach((api) => {
  global[api] = canvasWindow[api];
  global.window[api] = canvasWindow[api];
});

// setup.js
import { vi } from 'vitest';

global.jest = vi;

await import('./jest-canvas-mock');