Jest testing with CRA: WebGL unsupported in this browser

[Zealot]

I've been trying to implement testing with Jest and I've run into a few issues, my stack is running React (with Create-React-App), Jest for testing, and Pixi 5.3.3.

My first issue was Jest being unable to render a canvas (TypeError: Cannot set property 'fillStyle' of null), which was solved by importing canvas-prebuilt in my tests' setup, this issue on Github is mentioning this problem. However, I now get a WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support. error, is it possible to launch tests with WebGL enabled?

I've also tried importing `jest-webgl-canvas-mock` and `webgl-mock` in my test's setup, with no success. Any clue on how to test the application using WebGL? I'd prefer not to use the Canvas version.

[jonforum]

i remember make some test with jest , if am not wrong you will need create and bind your own Canvas forEach before or something like thats....
it was also hellish with React, need a lot of plugins dependency and strange patching  !

beforeEach(() => {
    const createElement = document.createElement.bind(document);
    document.createElement = (tagName) => {
        if (tagName === 'canvas') {
            return {
                getContext: () => ({}),
                measureText: () => ({})
            };
        }
        return createElement(tagName);
    };
});

reactjs - How to add <canvas> support to my tests in Jest? - Stack Overflow

Good luck is not so easy to make good test !
it takes a lot of time and there are a lot of complications I find.

I abandoned tests for PIXI, but I remain curious for easily possible solutions!

Edited November 27, 2020 by jonforum

[Zealot]

Hi @jonforum
I believe using `canvas-prebuilt` actually solved the canvas problem, now it's WebGL that's causing me trouble, to confirm that: I've installed pixi.js-legacy and forced canvas through the forceCanvas option and all my tests passes successfully.

I'd however not use the legacy version with canvas.
Thanks a lot for your reply and insight!

[jonforum]

20 minutes ago, Zealot said:

Hi @jonforum
I believe using `canvas-prebuilt` actually solved the canvas problem, now it's WebGL that's causing me trouble, to confirm that:

may be a trail to try.
stackgl/headless-gl: ? Windowless WebGL for node.js (github.com)

[Zealot]

I didn't know about this, I'll look into it later tonight, thank you!
Interestingly, using the WebGL render with pixi.js-legacy seems to solve the issue, tests are running even with the WebGL enabled.
I'll come back later to confirm that.

[ivan.popelyshev]

> I've installed pixi.js-legacy

Usual problem: tow different versions of pixi, like, pixi.js 5.2 and pixi.js-legacy 5.3.3 . rm -rf node_modules  , rm package.lock, npm install

Also recommend to use 5.3.4, it has a serious bugfix. Im waiting for bigtimebuddy to release it today

[Zealot]

Thanks for your input @ivan.popelyshev ?

Using the pixi.js package (5.3.3, also tried with 5.4.0-rc.2) didn't work, even with headless gl imported before the tests, I may actually have to initialize headless gl somehow but I'm not sure how to provide it to Pixi.

Tests are running well in WebGL with pixi.js-legacy, as a reference, here's my setupTests.js

import "@testing-library/jest-dom/extend-expect";
import "@testing-library/jest-dom";

import { render, fireEvent } from "./test-utils";

import "canvas-prebuilt";
import "canvas";
import "jest-canvas-mock";
import "webgl-mock";
import "jest-webgl-canvas-mock";

I think I'll go with legacy for now and go back to pixi.js at some point if I ever manage to run my tests, maybe the 5.3.4 will fix that issue, it's difficult for me to understand why using legacy solved a problem linked to WebGL, I'll have to look into it more in the future.