How To Unit Test THREE.JS

When unit testing WebGL/Three.js code, how do you do it? Are you using a test framework or writing your own tests without a framework? I tried using Jest, but it causes all kinds of headaches and is extremely slow to run. Additionally, my library heavily relies on ‘three/node’ and Jest seems to have a problem with it.

Anyone have any tips on how to write unit test for three.js code?

Assuming you mean normal JavaScript unit tests, where you can check whether some variable is in state A or state B… personally I like Ava or Tape. For me Jest is too complicated, and not worth it unless you’re testing frontend components. If it’s important that tests run in a web browser, there’s Tape Run, but most of the newer test frameworks aren’t very good at this, and going back to something older like MochaJS might make sense.

Example with Tape here:

If you need to instantiate renderers, controls, or other things that rely on the DOM, it gets a bit more complicated and you may want additional tools like jsdom (to mock the browser environment in Node.js) or sinon (to stub out methods on objects).

I’d try to avoid running actual WebGL in tests, unless it’s absolutely essential to what you’re testing. Tools like Cypress can help with screenshot tests, but require more work than traditional unit tests.

2 Likes

Thanks, I’ll give it a try