React testing library render() fails when rendering NGL stage

[JAZZ-FROM-HELL]

When attempting to test an app that contains React NGL <Stage/> using React testing library, render() operation fails with error TypeError: Cannot read property 'setParameters' of undefined

See minimal reproduction based on create-react-app and the basic NGL React example here

` TypeError: Cannot read property 'setParameters' of undefined

  3 |
  4 | test('renders react ngl app', () => {
> 5 |   render(<App />);
    |   ^
  6 |   expect(screen.getByRole('app')).toBeTruthy();
  7 | });
  8 |

  at E_.setParameters (node_modules/ngl/dist/ngl.js:1:1012424)
  at node_modules/react-ngl/src/components/Stage/Stage.tsx:78:13
  at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
  at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
  at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
  at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
  at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
  at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
  at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
  at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
  at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
  at render (node_modules/@testing-library/react/dist/pure.js:97:26)
  at Object.<anonymous> (src/App.test.js:5:3)
  at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (node_modules/@jest/core/build/runJest.js:404:19)

`

[JAZZ-FROM-HELL]

Possibly react-ngl doesn't support later versions of React (16+)?

[gky360]

Thank you for reporting an issue.

When I run yarn test in your example project, I got the following error. I suspect this is the cause of getting uninitialized stage and Cannot read property 'setParameters' of undefined. I think you need to set up canvas and WebGL for jest before you run the test.

  console.log
    THREE.WebGLRenderer 95

      at new Sa (node_modules/ngl/dist/ngl.js:1:301628)

  console.error
    Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
        at module.exports (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at HTMLCanvasElementImpl.getContext (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
        at HTMLCanvasElement.getContext (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:131:58)
        at new Sa (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/ngl/dist/ngl.js:1:303059)
        at yf._initRenderer (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/ngl/dist/ngl.js:1:641214)
        at new yf (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/ngl/dist/ngl.js:1:638691)
        at new E_ (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/ngl/dist/ngl.js:1:1010962)
        at /Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/react-ngl/src/components/Stage/Stage.tsx:41:28
        at commitAttachRef (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/react-dom/cjs/react-dom.development.js:20875:7)
        at commitLayoutEffects (/Users/gky360/dev/src/github.com/JAZZ-FROM-HELL/react-ngl-testing-library/node_modules/react-dom/cjs/react-dom.development.js:23431:9) undefined

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at HTMLCanvasElementImpl.getContext (node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
      at HTMLCanvasElement.getContext (node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:131:58)
      at new Sa (node_modules/ngl/dist/ngl.js:1:303059)
      at yf._initRenderer (node_modules/ngl/dist/ngl.js:1:641214)

[JAZZ-FROM-HELL]

@gky360 Thanks for your response.

I've attempted to add the following dependencies: yarn add -D canvas jest-canvas-mock jest-webgl-canvas-mock

In my jest.config.js I've added:

    setupFiles: [
        "jest-canvas-mock",
        "jest-webgl-canvas-mock",
    ],

That didn't help unfortunately, I'm still getting the same error.

Could you please specify which exact dependencies / configurations I should add to make it work?

[gky360]

I'm not sure but I found using canvas and gl may help resolve the issue.

https://github.com/MasatoMakino/minimal-test-environment-jest-threejs

[JAZZ-FROM-HELL]

I've added all canvas and gl dependencies and configurations so far to the create-react-app. The test still fails with the same error. In the threejs test they don't use JSX, which might be related.

https://github.com/JAZZ-FROM-HELL/react-ngl-testing-library/tree/jest-canvas-webgl