Mock canvas #1782

endel · 2017-03-22T13:25:27Z

Is it possible to mock canvas without having the actual implementation (canvas/canvas-prebuilt)?

I'd like to prevent this error from happening, as the canvas functionality is not really important for me:

Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

The text was updated successfully, but these errors were encountered:

endel · 2017-03-22T15:03:31Z

In case anyone needs this, here's how I solved it:

const utils = require("jsdom/lib/jsdom/utils");
const canvasMock = require("canvas-mock");

function Canvas () {
    canvasMock(this);
    this.toDataURL = function() { return ""; }
}
utils.Canvas = Canvas;

domenic · 2017-03-22T22:07:11Z

Please don't do that. It will break in a future patch release. Instead, override the getContext() method, i.e. window.HTMLCanvasElement.prototype.getContext = ...

endel · 2017-03-23T08:26:47Z

Thanks @domenic !

cattermo · 2017-10-18T11:34:25Z

@domenic I can't get that to work. My overridden method does not get called. I use jest and setup script file as follows:

import { jsdom } from 'jsdom';
import mockLocalStorage from './mockLocalStorage';
import jQuery from 'jquery';
import Backbone from 'backbone';
import moment from 'moment';

const dom = jsdom('<!doctype html><html><body></body></html>');
const { window } = dom.defaultView;

function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
        .filter(prop => typeof target[prop] === 'undefined')
        .map(prop => Object.getOwnPropertyDescriptor(src, prop));
    Object.defineProperties(target, props);
}

//Mock canvas (used by qtip)
window.HTMLCanvasElement.prototype.getContext = () => {
    return {};
};

global.window = window;
global.document = window.document;
global.navigator = {
    userAgent: 'node.js',
};
global.localStorage = mockLocalStorage;
global.jQuery = jQuery;
global.$ = jQuery;
global.fetch = () => Promise.resolve();
Backbone.$ = jQuery;
copyProps(window, global);

//Mock Mousetrap (only works in browser)
jest.mock('mousetrap', () => { return { bind: () => {}}});

//Set moment locale for all tests
moment.locale('sv');

Sorry for polluting global in node but this is a very old and big code base which I try to migrate to Jest.
Jest version: 21.2.1
Jsdom version: 9.12.0

Would be very nice if mocking canvas (without using canvas package since not supported in Windows) was covered by official docs and not only as a comment in an issue.

molant · 2017-10-18T12:37:29Z

without using canvas package since not supported in Windows

Why isn't canvas-prebuilt an option for you? That's what we are using in our project without any issue (Win, Mac and Linux, although everything has to be x64).

domenic · 2017-10-18T16:35:56Z

In general we're not planning to add docs or help with one-off mocking issues. We've covered this in https://github.com/tmpvar/jsdom#intervening-before-parsing in general and any specific issues are going to be related to your specific codebase.

endel · 2017-10-18T16:56:23Z

Here's a simple way to mock canvas I came up with:

//
// Mock Canvas / Context2D calls
//
function mockCanvas (window) {
    window.HTMLCanvasElement.prototype.getContext = function () {
        return {
            fillRect: function() {},
            clearRect: function(){},
            getImageData: function(x, y, w, h) {
                return  {
                    data: new Array(w*h*4)
                };
            },
            putImageData: function() {},
            createImageData: function(){ return []},
            setTransform: function(){},
            drawImage: function(){},
            save: function(){},
            fillText: function(){},
            restore: function(){},
            beginPath: function(){},
            moveTo: function(){},
            lineTo: function(){},
            closePath: function(){},
            stroke: function(){},
            translate: function(){},
            scale: function(){},
            rotate: function(){},
            arc: function(){},
            fill: function(){},
            measureText: function(){
                return { width: 0 };
            },
            transform: function(){},
            rect: function(){},
            clip: function(){},
        };
    }

    window.HTMLCanvasElement.prototype.toDataURL = function () {
        return "";
    }
}

const document = jsdom.jsdom(undefined, {
  virtualConsole: jsdom.createVirtualConsole().sendTo(console)
});

const window = document.defaultView;
mockCanvas(window);

cattermo · 2017-10-18T18:05:30Z

Thanks a lot! The canvas prebuilt package seems to be working.

micabe · 2017-10-24T15:10:43Z

Hello @cattermo,
I have added canvas-prebuilt to my deps, do i need to change my jest configuration ? I can't make it to work it gives me
Not implemented: HTMLCanvasElement.prototype.toBlob (without installing the canvas npm package)

cattermo · 2017-10-24T15:19:22Z

@micabe
I did not make any configuration changes. Jsdom will pick up canvas prebuilt if it's present in node_modules.

Maybe that specific function is not supported?

micabe · 2017-10-30T12:36:00Z

It s working now after yarn cache clean Sorry for bothering you ! thanks @cattermo

hustcc · 2018-02-01T08:30:04Z

Maybe jest-canvas-mock can help.

noscripter · 2018-10-15T03:13:12Z

The solution is simple, just install canvas as a devDependency and rerun your jest tests.

ref: https://github.com/jsdom/jsdom#canvas-support

viniciusd · 2018-10-25T13:14:37Z

That is still not working because of the way jsdom checks for the canvas modules at lib/jsdom/utils.js:

  exports.Canvas = require(moduleName);
  if (typeof exports.Canvas !== "function") {
    // In browserify, the require will succeed but return an empty object
    exports.Canvas = null;
  }

Doing require('canvas') returns an Object that has the Canvas function. It does not returns the Canvas function straight away. Or am I wrong on this issue? It worked well when I was using the canvas-prebuilt module, but it seems the canvas module has a different API. I am using canvas' latest version, 2.0.1.
Edit
I tested the previous major version (1.6.x) and it works fine, it is an API change that JSDOM is not treating.

YevgenSnuffkin · 2018-11-26T10:01:40Z

You can just do:

HTMLCanvasElement.prototype.getContext = jest.fn()

if actual implementation is not important for you

paradite · 2019-01-29T03:43:21Z

That is still not working because of the way jsdom checks for the canvas modules at lib/jsdom/utils.js:
  exports.Canvas = require(moduleName);
  if (typeof exports.Canvas !== "function") {
    // In browserify, the require will succeed but return an empty object
    exports.Canvas = null;
  }
Doing require('canvas') returns an Object that has the Canvas function. It does not returns the Canvas function straight away. Or am I wrong on this issue? It worked well when I was using the canvas-prebuilt module, but it seems the canvas module has a different API. I am using canvas' latest version, 2.0.1.
Edit
I tested the previous major version (1.6.x) and it works fine, it is an API change that JSDOM is not treating.

I have the same problem. Looks like the issues is not with jsdom as the fix was merged a while ago in #1964 and available since version 13.
However, the jsdom version in jest-environment-jsdom is still stuck at ^11.5.1 and I believe that is causing the problem:
https://github.com/facebook/jest/blob/2e2d2c8dedb76e71c0dfa85ed36b81d1f89e0d87/packages/jest-environment-jsdom/package.json#L14

danieldanielecki · 2019-03-01T09:31:33Z

Without installing canvas, or canvas-prebuilt was able to get rid off errors related to HTMLCanvasElement, as well any others canvas methods nicely proposed by @endel as a hack to get around this problem. As @hustcc proposed, used jest-canvas-mock with finding quite clean solution. For technical details please take a look on this comment.

grtjn · 2019-03-01T13:52:50Z

I was seeing messages like "Cannot read webkitBackingStorePixelRatio of null", as well as "
Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)", and installing canvas(-prebuilt) was not enough. I went inside package-lock.json, fixed the jest-environment-jsdom to point to jsdom 13, threw away node_modules, and reran npm install. The error messages went away. I think @paradite is right, and opened a ticket against jest:

jestjs/jest#8016

grtjn · 2019-03-01T14:47:09Z

Got feedback. It is related to jest being stuck with older node versions. If you need support for latest node, look here: https://www.npmjs.com/package/jest-environment-jsdom-thirteen. This is jest specific though, so perhaps a little off-topic here. Sharing anyhow for posterity..

danieldanielecki · 2019-03-04T10:26:14Z

@grtjn - checked the jest-environment-jsdom-thirteen dependency, but in my case I still got these 2 exactly the same errors

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
TypeError: Cannot read property 'fillRect' of null

Keeping my solution mentioned earlier, about Node version I wouldn't say 10.15 is a deprecated one, as I got the problems for such environment

Angular CLI: 7.2.4
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4

grtjn · 2019-03-05T11:40:42Z

FYI: I had to append "testEnvironment": "jest-environment-jsdom-thirteen" to my jest config, and install canvas package, as well as the Cairo OS toolset. canvas-prebuilt didn't seem to work for me. I am using Vue.

danieldanielecki · 2019-03-08T15:36:21Z

Link to Cairo OS toolset dependency? Couldn't find that one.

grtjn · 2019-03-10T15:47:57Z

@danieldanielecki See main page of 'canvas' package: https://www.npmjs.com/package/canvas#compiling

danieldanielecki · 2019-03-10T19:34:55Z

@grtjn thanks for it - maybe at some point will take an advantage of it. I was missing it, but looks more complicated than my solution so keeping the project as is.

cmdcolin · 2019-06-21T00:13:19Z

Sorry to necropost but @grtjn suggestion of installing jest-environment-jsdom-thirteen (I used fourteen just since it's more recent) fixed my issue. I tried using jest-canvas-mock but we did some weird stuff where we fake createImageBitmap using node-canvas when OffscreenCanvas is not available, which it is not in many browsers, and jest-canvas-mock got pretty confused by this. Maybe another day we'll get that working...it is a cool mock library.

See jsdom/jsdom#1782 grafana/grafana#20921

eaemilio · 2021-08-31T19:20:14Z

You can just do:
HTMLCanvasElement.prototype.getContext = jest.fn()
if actual implementation is not important for you

I got TypeError: Cannot assign to read only property 'getContext' of object '[object Object]' when trying to do this, did someone know how to fix it?

endel closed this as completed Mar 22, 2017

David-Else mentioned this issue Jul 10, 2018

request : please make a version for mocha hustcc/jest-canvas-mock#10

Closed

craigbilner mentioned this issue Aug 1, 2018

test: refactor author profile snaps newsuk/times-components#1161

Merged

mrmckeb mentioned this issue Dec 14, 2018

Canvas error when running tests facebook/create-react-app#6020

Closed

grtjn mentioned this issue Mar 1, 2019

Jest fails because of outdated jsdom dependency in jest-environment-jsdom jestjs/jest#8016

Closed

danieldanielecki mentioned this issue Mar 4, 2019

RangeError: Maximum call stack size exceeded VincentGarreau/particles.js#369

Open

chopfitzroy mentioned this issue Apr 1, 2019

Error with Storyshots, Jest and Canvas storybookjs/storybook#6367

Closed

tsv2013 added a commit to surveyjs/survey-pdf that referenced this issue Apr 10, 2019

Fixed canvas getContext error (jsdom/jsdom#1782 (comment))

b3a1a84

cmdcolin mentioned this issue Sep 10, 2019

Use with OffscreenCanvas? hustcc/jest-canvas-mock#42

Closed

alexanderzobnin added a commit to grafana/grafana-zabbix that referenced this issue Jan 16, 2020

fix tests

5c9d9cd

See jsdom/jsdom#1782 grafana/grafana#20921

akash-pal mentioned this issue Jul 26, 2020

Error when use lottie-web and run test reactjs with Jest. airbnb/lottie-web#2133

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mock canvas #1782

Mock canvas #1782

endel commented Mar 22, 2017 •

edited

endel commented Mar 22, 2017

domenic commented Mar 22, 2017

endel commented Mar 23, 2017

cattermo commented Oct 18, 2017

molant commented Oct 18, 2017 •

edited

domenic commented Oct 18, 2017

endel commented Oct 18, 2017 •

edited

cattermo commented Oct 18, 2017

micabe commented Oct 24, 2017

cattermo commented Oct 24, 2017

micabe commented Oct 30, 2017

hustcc commented Feb 1, 2018

noscripter commented Oct 15, 2018

viniciusd commented Oct 25, 2018 •

edited

YevgenSnuffkin commented Nov 26, 2018

paradite commented Jan 29, 2019

danieldanielecki commented Mar 1, 2019

grtjn commented Mar 1, 2019

grtjn commented Mar 1, 2019

danieldanielecki commented Mar 4, 2019

grtjn commented Mar 5, 2019

danieldanielecki commented Mar 8, 2019

grtjn commented Mar 10, 2019

danieldanielecki commented Mar 10, 2019

cmdcolin commented Jun 21, 2019

eaemilio commented Aug 31, 2021

Mock canvas #1782

Mock canvas #1782

Comments

endel commented Mar 22, 2017 • edited

endel commented Mar 22, 2017

domenic commented Mar 22, 2017

endel commented Mar 23, 2017

cattermo commented Oct 18, 2017

molant commented Oct 18, 2017 • edited

domenic commented Oct 18, 2017

endel commented Oct 18, 2017 • edited

cattermo commented Oct 18, 2017

micabe commented Oct 24, 2017

cattermo commented Oct 24, 2017

micabe commented Oct 30, 2017

hustcc commented Feb 1, 2018

noscripter commented Oct 15, 2018

viniciusd commented Oct 25, 2018 • edited

YevgenSnuffkin commented Nov 26, 2018

paradite commented Jan 29, 2019

danieldanielecki commented Mar 1, 2019

grtjn commented Mar 1, 2019

grtjn commented Mar 1, 2019

danieldanielecki commented Mar 4, 2019

grtjn commented Mar 5, 2019

danieldanielecki commented Mar 8, 2019

grtjn commented Mar 10, 2019

danieldanielecki commented Mar 10, 2019

cmdcolin commented Jun 21, 2019

eaemilio commented Aug 31, 2021

endel commented Mar 22, 2017 •

edited

molant commented Oct 18, 2017 •

edited

endel commented Oct 18, 2017 •

edited

viniciusd commented Oct 25, 2018 •

edited