Pixi explodes on imports in jest

[thomasuster]

TypeError: Cannot set property 'fillStyle' of null

[thomasuster]

yarn add canvas-prebuilt fixes this, this is an issue with jsdom not auto configured to use canvas.

[dortamiguel]

works for me 🙂

yarn add -D canvas-prebuilt

[seethroughdev]

In case anyone else searches for this, here's a little more info:

You have to install the 1.x version of canvas-prebuilt until jsdom/jsdom#1964 is fixed.

yarn add -D canvas-prebuilt@1

after that, this shouldn't be an issue.

[andrevenancio]

you dont need to install the canvas-prebuilt to be honest. Simply create a mock api on your tests setup.

Here's mine, with mocha, enzyme, jsdom.

import { JSDOM } from 'jsdom';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const exposedProperties = ['window', 'navigator', 'document'];
const { document } = (new JSDOM('', { url: 'https://your-website-mock.com/' })).window;
global.document = document;
global.window = document.defaultView;
global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
};

Object.keys(document.defaultView).forEach((property) => {
    if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
    }
});

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

global.window.HTMLCanvasElement.prototype.toDataURL = () => {
    return '';
};


global.navigator = {
    userAgent: 'node.js',
};

[sgb-io]

nice @andrevenancio 😄

[sgb-io]

For anyone googling, this can also affect react-lottie

[andrevenancio]

That's was exactly why I found this issue @sgb-io ! I was trying to use react-lottie 😆

[StephanBijzitter]

I already had canvas-prebuilt installed and used it successfully before, but today it suddenly started throwing this error.

If you already have canvas-prebuilt (and you want to keep it): yarn install --force did the trick for me.

[lk-jeffpeck]

This worked for me:
https://www.npmjs.com/package/jest-canvas-mock

[NoriSte]

The @lk-jeffpeck solution works like a charm for me!
The previous solutions worked but just for some days, every now and then the problem reappears...

[ZufengW]

This worked for me:
https://www.npmjs.com/package/jest-canvas-mock

Thanks. Worked for me as well.

In case future readers get this problem:
Blindly following their Setup section did not work. I had to add "setupFiles": ["jest-canvas-mock"] to my jest.config.js instead of package.json.

See: configuration

[knenkne]

For anyone googling, this can also affect react-lottie

Any solution?

[alanaugustodias]

For anyone googling, this can also affect react-lottie

having the same here...

[knenkne]

For anyone googling, this can also affect react-lottie

having the same here...

Some of canvas, canvas-prebuilt, jest-canvas-mock did the work for me. Can't tell exactly, i've been messing with jsdom-quokka-plugin also.

[alanaugustodias]

For anyone googling, this can also affect react-lottie

having the same here...

Some of canvas, canvas-prebuilt, jest-canvas-mock did the work for me. Can't tell exactly, i've been messing with jsdom-quokka-plugin also.

Nice one! I've got that also from an open issue on lottie-react-web repo

[SiGnaLz314]

Hope this helps the next seeker.

I was able to get a clean pass on jest after running into this exact issue by following this:
#iov-one/ponferrada#133
More specifically (@alexlouden with jsom fourteen):
#iov-one/ponferrada#133 (comment)

Note: does appear window.* will fail.

[stansey]

Sorta maybe worked for me too. I added canvas and jest-canvas-mock.

canvas-prebuilt seems to be unavailable now.