如何为three.js 编写单元测试？答案

【问题标题】：How to write unit tests for three.js?如何为three.js 编写单元测试？
【发布时间】：2020-04-05 23:13:57
【问题描述】：

基本上，我要问的是，有没有办法为我的 JavaScript 文件为 three.js 库编写单元测试？

我有一个 3D 查看器，里面装有摄像头、渲染器、加载器等……我该如何为类似的东西编写测试？有什么我可以阅读的吗？甚至可能吗？

【问题讨论】：

这是可能的，但这取决于你的想法，three.js 项目本身带有一个whole bunch of unit tests，所以看看这些，看看three.js 社区是如何做的它
您可以在 javascript 中使用三个.js 对象进行操作，然后测试某些属性是否符合预期，Object3D.position.equals(expectedPosition)。

【解决方案1】：

我找到了一种以无头方式对 webgl/threejs 进行单元测试的方法。这不需要任何图像比较等。

采取的方法：

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

【讨论】：

【解决方案2】：

您可以测试预期状态的属性，也可以使用 chromium 等无头浏览器来呈现预期和实际图像。如果你搜索 testing WebGL，你会发现后者的例子

【讨论】：