0

I have a react app with animation rendered with PIXI.js and @inlet/react-pixi.

When running tests with Jest, I get errors:

Error: Uncaught [TypeError: Cannot read properties of null (reading 'stage')]

● run Homepage tests › is Homepage rendered

WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.

   5 | describe('run Homepage tests', () => {
   6 |   test('is Homepage rendered', () => {
>  7 |     render(
     |     ^
   8 |       <MockedProvider>
   9 |         <HomePage />
  10 |       </MockedProvider>`

How should the pixi.js-legacy be implemented as the fallback for tests?

"@inlet/react-pixi": "^6.8.0", "pixi.js": "^6.4.2", "jest-canvas-mock": "^2.4.0",

UPD:

Mocking pixi.js with pixi.js-legacy I got this error:

enter image description here

However, I tried to import pixi.js-legacy:

import 'pixi.js-legacy';

And got the same kind of error:

enter image description here

It seems that there is some problem with importing 'pixi.js-legacy'.

What could go wrong with it?

Has anybody ever seen an example of Jest or other framework tests that works?

Roman Poludnev
  • 95
  • 5
  • See: https://github.com/pixijs/pixijs/issues/8338 , https://github.com/pixijs/pixijs/issues/8337 , https://github.com/pixijs/pixijs/tree/dev/bundles/pixi.js-node – domis86 Aug 18 '22 at 07:44

2 Answers2

1

If it's really working with the legacy version then you can swap the libraries while testing.

Install pixi.js-legacy as a dev dependency.

  1. Create setup-jest.js in your root directory.
  2. Add the content
jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy'));
  1. Modify your Jest configuration and add the following line
setupFiles: ['<rootDir>/setup-jest.js']

This will mock your real Pixi library with the legacy one.

EDIT

For ES6 imports try

jest.mock('pixi.js', () => {
  return {
    default: jest.requireActual('pixi.js-legacy')
  };
});

More info here

n1md7
  • 2,854
  • 1
  • 12
  • 27
  • good day. I've tried your solution, as I'm using a CRA based react app with ts, in order to avoid ejecting, I added `jest.mock('pixi.js', jest.requireActual('pixi.js-legacy'));` to setupTests.ts. Then I got this error: TypeError: /Users/.../src/setupTests.ts: The second argument of `jest.mock` must be an inline function. 2 | import 'jest-canvas-mock'; 3 | > 4 | jest.mock('pixi.js', jest.requireActual('pixi.js-legacy')); – Roman Poludnev Aug 18 '22 at 10:37
  • After fixed that I got another error: TypeError: Cannot read properties of undefined (reading 'add') 2 | import 'jest-canvas-mock'; 3 | > 4 | jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy')); Is there something I'm doing wrong? Jest docs haven't helped me at all – Roman Poludnev Aug 18 '22 at 10:39
  • 1
    Apparently it needs a callback instead of direct passing. Like `jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy'));` But can you show more details about the other error you are facing? – n1md7 Aug 18 '22 at 11:03
  • This that new error: src/App.test.tsx ● Test suite failed to run TypeError: Cannot read properties of undefined (reading 'add') 2 | import 'jest-canvas-mock'; 3 | > 4 | jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy')); | ^ 5 | at Object. (node_modules/pixi.js-legacy/src/index.ts:13:12) – Roman Poludnev Aug 18 '22 at 12:34
  • Honestly not sure why it's failing but you can verify it by logging in tests to make sure mocked PIXI actually has the properties you are expecting. Maybe you need to export it using `default` key. I'll update the answer and you can try that too – n1md7 Aug 18 '22 at 16:25
  • I've updated the post with my attempts to mock pixi with the legacy, and I also tried to import pixi.js-legacy like `import 'pixi.js-legacy';`, and in this case I got the same error: ` TypeError: Cannot read properties of undefined (reading 'add')`. Anyway, have you ever seen working test with PIXI? – Roman Poludnev Aug 24 '22 at 09:41
  • Honestly, no. Never tried it – n1md7 Aug 24 '22 at 12:15
  • have you read my comment from week ago? https://stackoverflow.com/questions/73394433/pixi-js-tests-with-jest-in-react-spa/73395199?noredirect=1#comment129621462_73394433 . Problem is that you want to run PixiJS (no matter if "legacy" version or not) in node.js environment - when it is intended for use in browsers. Please try this way: https://github.com/pixijs/pixijs/tree/dev/bundles/pixi.js-node or https://github.com/bigtimebuddy/pixi-node-example – domis86 Aug 25 '22 at 10:19
1

you can try

npm i -D jest-webgl-canvas-mock canvas
  • jest-webgl-canvas-mock: let node can ues webgl
  • canvas: canvas usage

and add import into ./jest.config.json like down below

{
  "preset": "ts-jest",
  "testEnvironment": "jsdom",
  "coverageDirectory": "./coverage",
  "setupFiles": ["jest-webgl-canvas-mock"]
}

it actually help me to fix this problem

fix-prop-img

linyejoe2
  • 11
  • 4
  • Where to import jest config json... in the test? And, should I pass this object to Jest during initialization? – Teddy Sep 24 '22 at 04:23
  • > Where to import jest config json... in the test? just create it at root , Jest will auto discovered it >should I pass this object to Jest during initialization? is unnecessary – linyejoe2 Sep 28 '22 at 08:52