使用 Jest 在 vue-test-utils 中导入 ThreeJS 的错误答案

【问题标题】：Import errors for ThreeJS in vue-test-utils with Jest使用 Jest 在 vue-test-utils 中导入 ThreeJS 的错误
【发布时间】：2021-07-20 22:08:53
【问题描述】：

自从我将 Three.js 集成到我的一个组件中以来，我正试图让我的笑话测试（用于 VueJS SPA）工作，但我遇到了一些麻烦。当我运行应用程序时一切正常，但测试因错误而崩溃：

/Users/Whomever/FE/node_modules/three/examples/jsm/controls/OrbitControls.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import {
                                                                                             ^^^^^^

SyntaxError: Cannot use import statement outside a module

我知道错误的来源是 OrbitControls，但我无法解决这个问题。我试图在我的组件中导入 /js 而不是 /jsm，但随后我收到错误消息，提示“未定义三个”。此外，我最不了解的是，这个单一组件（距 App.vue 文件有四个子层）在每次测试时都会崩溃，甚至是所有根本不使用 Three.js 的组件。

我也尝试在主 Vue 定义中全局设置 THREE，但没有成功。这是我的组件文件的编码方式：

import Vue from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from "three";
export default Vue.extend({
  name: "Some3DComponent",
  components: {}
  data: () => ({
    displayModes: [],
    viewWidth: 100,
    viewHeight: 100,
    modelClickableElements: null,
    has3dModel: false,
    ground: null,
    animationFrame: null,
    editorMode: null,
    renderGround: true,
    scales: null
  }),
//Rest of the code that calls THREE and OrbitControls

    });

最后我也试过在index.html文件中导入THREE，没有成功。现在我的选择已经不多了。

问题是从使用 Three.js 开始的，在此之前所有测试都可以正常运行。

提前感谢您的帮助！

【问题讨论】：

标签： javascript vue.js three.js jestjs

【解决方案1】：

您不应从示例文件夹中导入 OrbitControls。这是一个自定义函数。

尝试将您需要的示例代码复制/粘贴到新的 TypeScript 类到您的项目中。然后你应该能够正确导入它。请注意，它们可能都导入了三个，因此您可能会遇到上下文问题。

【讨论】：