ReferenceError: jest is not defined

[ethan-bloom]

ReferenceError: jest is not defined ❯ node_modules/jest-canvas-mock/lib/classes/CanvasRenderingContext2D.js:121:19 ❯ new CanvasRenderingContext2D node_modules/jest-canvas-mock/lib/classes/CanvasRenderingContext2D.js:120:15 ❯ HTMLCanvasElement.getContext2d node_modules/jest-canvas-mock/lib/mock/prototype.js:27:19 ❯ HTMLCanvasElement.mockCall node_modules/@vitest/spy/dist/index.js:50:17 ❯ HTMLCanvasElement.getContext2d [as getContext] node_modules/tinyspy/dist/index.js:39:20 ❯ Object.platformApi.measureText node_modules/zrender/lib/core/platform.js:35:41 ❯ getWidth node_modules/zrender/lib/contain/text.js:16:51 ❯ Module.getLineHeight node_modules/zrender/lib/contain/text.js:68:12 ❯ Module.parsePlainText node_modules/zrender/lib/graphic/helper/parseText.js:90:54

[riccjohn]

I'm seeing the same thing using vitest-canvas-mock 0.3.3, which looks like it itself is using jest-canvas-mock 2.5.2

⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
ReferenceError: jest is not defined
⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯
 ❯ node_modules/jest-canvas-mock/lib/mock/createImageBitmap.js node_modules/jest-canvas-mock/lib/mock/createImageBitmap.js:9:16
 ❯ __require2 node_modules/.vitest/deps/window-HHD6YH5J.js:10:50
 ❯ node_modules/jest-canvas-mock/lib/window.js node_modules/jest-canvas-mock/lib/window.js:16:49
 ❯ __require2 node_modules/.vitest/deps/window-HHD6YH5J.js:10:50
 ❯ node_modules/.vitest/deps/window-HHD6YH5J.js:3612:16
 ❯ ModuleJob.run node:internal/modules/esm/module_job:217:25
 ❯ ModuleLoader.import node:internal/modules/esm/loader:316:24
 ❯ importMockWindow node_modules/vitest-canvas-mock/dist/index.js:16:27

[ethan-bloom]

I have noticed I am only encountering this issue when I enable lazyUpdate in the echarts library. I am unsure why this could be triggering this issue?

https://echarts.apache.org/en/api.html#echartsInstance.setOption

[mute---]

hey

It may be asynchronous related issue. try:

  beforeEach(() => {
    vi.useFakeTimers({ shouldAdvanceTime: true });
  });

[gdams]

I'm seeing this too

[cooperwalbrun]

I'm seeing the same thing using vitest-canvas-mock 0.3.3, which looks like it itself is using jest-canvas-mock 2.5.2

⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
ReferenceError: jest is not defined
⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯
 ❯ node_modules/jest-canvas-mock/lib/mock/createImageBitmap.js node_modules/jest-canvas-mock/lib/mock/createImageBitmap.js:9:16
 ❯ __require2 node_modules/.vitest/deps/window-HHD6YH5J.js:10:50
 ❯ node_modules/jest-canvas-mock/lib/window.js node_modules/jest-canvas-mock/lib/window.js:16:49
 ❯ __require2 node_modules/.vitest/deps/window-HHD6YH5J.js:10:50
 ❯ node_modules/.vitest/deps/window-HHD6YH5J.js:3612:16
 ❯ ModuleJob.run node:internal/modules/esm/module_job:217:25
 ❯ ModuleLoader.import node:internal/modules/esm/loader:316:24
 ❯ importMockWindow node_modules/vitest-canvas-mock/dist/index.js:16:27

Like @riccjohn, I also see this ReferenceError: jest is not defined error with an initial stack trace entry of

Object.<anonymous> node_modules/jest-canvas-mock/lib/mock/createImageBitmap.js:9:16

I am using vitest-canvas-mock v0.3.3. In my case, this is a somewhat uncommon error that seems to occur at random (I have not been able to consistently reproduce it).

[mute---]

Have you tried advancing timers?

[cooperwalbrun]

Have you tried advancing timers?

I can do this, however since the error is very infrequent/inconsistent for me, I am not sure how I will know for certain that advancing timers fixes the issue. I will try it nonetheless.

[gdams]

hey

It may be asynchronous related issue. try:

  beforeEach(() => {
    vi.useFakeTimers({ shouldAdvanceTime: true });
  });

@mute--- where would I put this? In my vitest-setup.ts file?

[mute---]

whereever you find it appropriate place :) i'd put this in test file where i use timers. don't forget to actually advance time by vitest.advanceTimersByTime(sometime) after canvas dependent component is rendered

[cooperwalbrun]

Have you tried advancing timers?

I can do this, however since the error is very infrequent/inconsistent for me, I am not sure how I will know for certain that advancing timers fixes the issue. I will try it nonetheless.

Update: even after adding vi.useFakeTimers({ shouldAdvanceTime: true }); and vi.advanceTimersByTime(250); before each unit test involving a component that renders a canvas, I am still seeing the ReferenceError: jest is not defined error with the same createImageBitmap.js:9:16 stack trace.

[davidnaas]

Adding this line in my test setup file seems to have fixed it for me

vi.stubGlobal("jest", vi);

vitest-canvas-mock does something similar but for some reason it seems to not take effect

[mute---]

Update: even after adding vi.useFakeTimers({ shouldAdvanceTime: true }); and vi.advanceTimersByTime(250); before each unit test involving a component that renders a canvas, I am still seeing the ReferenceError: jest is not defined error with the same createImageBitmap.js:9:16 stack trace.

you should advance timer after component render

vitest-canvas-mock does something similar but for some reason it seems to not take effect

vitest-canvas-mock clears the reference in afterAll callback and rendering fails because of its async nature (due to RAF)

[davidnaas]

Update: even after adding vi.useFakeTimers({ shouldAdvanceTime: true }); and vi.advanceTimersByTime(250); before each unit test involving a component that renders a canvas, I am still seeing the ReferenceError: jest is not defined error with the same createImageBitmap.js:9:16 stack trace.

you should advance timer after component render

vitest-canvas-mock does something similar but for some reason it seems to not take effect

vitest-canvas-mock clears the reference in afterAll callback and rendering fails because of its async nature (due to RAF)

Adding vi.advanceTimersByTime(250) somewhat arbitrarily in tests doesn't seem like a satisfactory fix to me. In my case it's not so clearcut which tests are actually causing this in the first place so there would be a lot of trial and error just sprinkling this line all over the place. This difficulty is also compounded by the fact that the tests have to be run in singleThread mode, i.e without isolation, for the canvas mock to work at all. It makes it very messy to figure out how and when all setup and teardown functions are run

[cooperwalbrun]

you should advance timer after component render

My apologies, I did use advanceTimersByTime after the component was rendered, not before. I just made a mistake when I was updating my previous comment the other day.

On a separate note, I am going to try using @davidnaas's workaround and see if that yields better results.

[Davont]

Is there a better solution?

[brentertz]

A workaround is for users to patch the jest-canvas-mock dependency and change jest to vi. There is only one instance at present. This can be done with patch-package for npm users, or alternatively via yarn/pnpm patch.

[johnnyshankman]

I'm having this issue as well. I'll audit for timers and report back.

I presumed it was related to the deprecation of deps.inline in recent versions of vite. As I now have to put it in server.deps.inline. I suppose that is not the case, which is somewhat of a relief.

There's no compat issues if we have proper peer deps right?

---

Update, added shouldAdvanceTime: true to my one call to vi.useFakeTimers. So far I've passed 2/2 times. Need to rerun a few more times to know for sure that this is reliable but it works so far.

[lumixraku]

I tried using vi.useFakeTimers({ shouldAdvanceTime: true }) and vi.advanceTimersByTime(250), and successfully solved some of the test cases. However, there are still some test cases that have not passed.