Zealot

Jest testing with CRA: WebGL unsupported in this browser

Recommended Posts

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?

1559320786_ScreenShot2020-11-27at20_07_11.thumb.png.d8e7ea52124b900456c50f5c45ebde6e.png

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.

Share this post


Link to post
Share on other sites

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 by jonforum

Share this post


Link to post
Share on other sites

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.
1579830642_ScreenShot2020-11-27at21_07_01.png.8a51c666d80e061f28ddf3afddace275.png

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.