4

I am trying to write snapshot tests for a webgl renderer I've written using jest, puppeteer and jest-image-snapshot. The way I am testing this is I have written a react TestApp which contains the canvas as below:

export function TestApp(props: { width: number; height: number }): JSX.Element {
  return (
    <div
      id="drawing"
      style={{
        ...props
      }}
    >
      <DrawingCanvas canvasProps={props} renderBehavior={RenderBehavior.Wet} />
    </div>
  );
}

I need to provide my renderer the WebGLRenderingContext which it requires when rendering the scene. So before each test I do the following:

beforeEach(async () => {
    div = document.createElement("div");
    document.body.appendChild(div);
    ReactDOM.render(<TestApp width={800} height={600} />, div);
    const canvas: HTMLCanvasElement = document.getElementById("drawing-canvas-wet");
    webglRenderer= new WebGLRenderer(canvas.getContext("webgl"));
    testPlayground = new TestPlayground(webglRenderer);
  });

Whenever I call canvas.getContext("webgl") the WebGLRenderingContext returned is null. Has anyone had this problem before?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
AdM
  • 55
  • 7
  • That is not how you access a DOM element rendered via React. You need to use [Refs](https://reactjs.org/docs/refs-and-the-dom.html) and wait for them to be [mounted](https://reactjs.org/docs/react-component.html#componentdidmount). Do you actually need the React element or are you just looking for a way to get a canvas element? – Thomas Dondorf Sep 20 '19 at 18:39
  • I am getting the canvas but I'm not getting the webgl rendering context. I do need the React element as that is how my app is set up. – AdM Sep 20 '19 at 18:52
  • If you are using React, you need to wait for the elements to be mounted before using them. – Thomas Dondorf Sep 20 '19 at 18:57
  • The element is getting mounted but I'm still not getting the webgl rendering context. – AdM Sep 23 '19 at 22:59

0 Answers0