使用 Jest 对 ThreeJS 应用程序进行单元测试

Question

我在使用 Jest 测试 JavaScript 文件时遇到了困难，该文件封装了与 ThreeJS 的大量交互。我首先尝试不模拟 ThreeJS，但没有奏效：

  ● TestSuite › Should instantiate a renderer attached to a specific element of the DOM

    TypeError: Cannot read property 'getExtension' of null

      36 |      */
      37 |     constructor(containerId: string) {
    > 38 |         this.renderer = new WebGLRenderer({ antialias: true });
      39 |         this.attachRenderer(containerId);
      40 |         this.createCamera();
      41 |         this.createScene();

这很正常，因为我们是 testing in a browser-like environment which has no webgl context 。所以我为解决这个问题所做的就是模拟three.js。

然后我用jest.mock("three");模拟了我的外部模块

  ● TestSuite › Should instantiate a renderer attached to a specific element of the DOM

    TypeError: this.renderer.setSize is not a function

      64 |             throw new Error("Cannot find DOM element object matching the specified ID: " + containerId);
      65 |         }
    > 66 |         this.renderer.setSize(window.innerWidth, window.innerHeight);
      67 |         element.appendChild(this.renderer.domElement);
      68 |     }
      69 |

这是预期的行为，因为 jest 中的每个模拟都返回 undefined，new WebGLRenderer(); 返回 undefined，而我对此无能为力。

我目前的解决方法是在我的测试文件中定义我在 ThreeJS 中使用的所有内容：

jest.mock("three", () => ({
    Scene: class Scene {
        public add(): void {
            return;
        }
    },
    WebGLRenderer: class WebGlRenderer {
        public render(): void {
            return;
        }
        public setSize(): void {
            return;
        }
    }
    // And a lot more...
}));

但我很清楚这不是最佳解决方案。在此之前我也在做同样的事情，但是在 mocks/three.js (https://jestjs.io/docs/en/manual-mocks) 中的一个文件中，它也可以正常工作，但这并不能满足我的需要。

有没有办法正确地测试这个文件，而不必编写大量的threejs 手动模拟？

Answer 1

我也在研究 webgl，并通过以下方式解决了这个问题。 https://github.com/AmitTeli/webgl-three-test

方法的总结是

1. 将所有全局变量如scene、renderer和camera移动到index.html
2. 在加载页面时初始化它们。例如在这个 reactjs 示例中，它们在根组件的 componentDidMount() 中初始化。其他函数可以使用此上下文。 （您可以通过运行 yarn start 进行检查）
3. 在进行单元测试时，在 setupTest.js 中初始化它们。我们将需要无头 webgl 的额外开发依赖项 - gl 和 canvas
4. 现在有了这个设置，我们可以在 App.test.js 中运行测试（您可以通过运行 yarn test 来检查）