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 |

这是预期的行为，因为开玩笑的每个模拟都返回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...
}));

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

有没有一种方法可以正确测试此文件，而不必编写大量的ThreeJs手动模拟？

Answer 1

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

该方法的摘要是

将所有全局变量（例如场景，渲染器和相机）移动到 index.html < / em>

在加载页面时将其初始化。例如在此reactjs示例中，它们在根组件的 componentDidMount（）中初始化。其他功能可以使用此上下文。（您可以通过运行 yarn start 进行检查）

在进行单元测试时，请在 setupTest.js 中对其进行初始化。我们将需要无头Webgl的其他开发依赖项- gl 和 canvas

现在使用此设置，我们可以在 App.test.js 中运行测试（您可以通过运行 yarn test 进行检查）

用Jest单元测试ThreeJS应用程序

1 个答案: