I'm currently facing a challenge with my Jest tests for a VueJS SPA after integrating Three.js into one of my components. While everything runs smoothly in the app, the tests fail with this error:
/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
It seems that the issue originates from OrbitControls, and I've been struggling to find a workaround. I attempted importing /js instead of /jsm in my component, but then faced an error stating "THREE is not defined." What baffles me the most is that this particular component (nested four layers deep from App.vue) causes all tests to crash, even those unrelated to Three.js.
I also tried declaring THREE globally in the main Vue definition without luck. Below is how my component file looks:
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
}),
//Remaining code utilizing THREE and OrbitControls
});
I even attempted importing THREE in the index.html file with no success, leaving me feeling stuck.
These challenges only arose after incorporating Three.js; previously, all tests functioned properly. Any assistance would be greatly appreciated!