How does everyone unit test their three js code?
I’m looking for a way without spinning up a browser (I plan to set up a separate browser click-through testing stack).
Is there a good mock library for WebGL?
I don’t see how it would be possible to test Three.js code without starting a browser, especially since so much of its functionality depends on the window object and the canvas webgl context. You probably wouldn’t be able to request an animation frame, or check webgl capabilities, or pass anything to the GPU without a browser.
But to answer your question, I test on a Win10 desktop, a Macbook Pro, an iPhone 5, 6, an iPad, and whatever Android device I can get my hands on. I’ve learned not to trust simply passing automatic testing because with visuals the code may still “work” but look completely different from one platform to the next.
I don’t test anything visual. Instead I try to decouple logic from the WebGL stuff and DOM and test that logic instead.
1 Like
@Ted_Plumtree, I am also trying to find some solution. I am able to create the scene in headless way and test addition of mesh to it. I believe a lot of unit testing can be done in this way. Of course it may not cover 100% of the situations and there is sure scope to improve.
If you are still working on this, please check if this works for you.
The example reactjs project can be found at https://github.com/AmitTeli/webgl-three-test
Here is the approach summary:
- Move all the global variables like scene, renderer and camera to index.html
- Initialize them on loading of the page. e.g. in this reactjs example, they are initialized in componentDidMount() of the root component. Other functions can use this context. (You can check this by running
yarn start) - While doing the unit testing, initialize them in setupTest.js. We will need additional dev dependencies of headless webgl - gl and canvas
- With this setup now we can run the test in say App.test.js (You can check this by running
yarn test)