无法在 vite vue ts 三个项目中使用三个对象运行玩笑测试

Question

这是我的测试：

import {Line} from "../src/modules/objs/line";
import {SceneWrapper} from "../src/modules/scene/sceneWrapper";
import * as THREE from "three";
import {DrawProfile} from "../src/modules/operations/draw/drawProfile";
import {snapIndicator} from "../src/modules/config/objs";

describe('snaps', () => {
    let sceneWrapper = new SceneWrapper(new HTMLCanvasElement());
    let lineStart = new THREE.Vector3(0, 0, 0);
    let cursorStart = sceneWrapper.getScreenCoordsFromSceneCoords(lineStart);
    let line = new Line(lineStart, new THREE.Vector3(10, 10, 10));
    sceneWrapper.scene.add(line);
    
    test('Box appear', () => {
        let operation = new DrawProfile(sceneWrapper);
        let startEvent = new PointerEvent('', {clientX: cursorStart.x, clientY: cursorStart.y});
        operation.searchSnapsHandler(startEvent);
        
        expect(operation.snap).toBeDefined();
        expect(sceneWrapper.scene).toContain(snapIndicator);
        expect(snapIndicator.position).toBe(lineStart);
    });
});

jest.config.cjs

：

module.exports = {
    preset: 'ts-jest/presets/js-with-ts-esm',
    testEnvironment: 'jsdom',
};

当我用

jest

运行它时，我得到：

/Users/a/Programming/JavaScript/CAD/test/main.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { Line } from "../src/modules/objs/line";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

当我改变时

jest.config.cjs

:

module.exports = {
    preset: 'ts-jest/presets/js-with-ts-esm',
    testEnvironment: 'jsdom',
    moduleNameMapper: {
        '^(\\.{1,2}/.*)\\.js$': '$1',
    },
};

然后运行，我得到：

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

    SyntaxError: Cannot use import statement outside a module

       7 | import {SceneType} from "./sceneType";
       8 | import {Scene3DView} from "./scenes/scene3DView";
    >  9 | import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
         | ^
      10 | import {cameraFarPlane, cameraFov, cameraNearPlane} from "../config/dims";
      11 | import {Operation} from "../operations/operation";
      12 | import {defaultOrbitControlsMouseHandlers, startSceneType} from "../config/others";

当我按照

jest文档

中所述使用NODE_OPTIONS=--experimental-vm-modules jest运行它时！我得到：

/Users/a/Programming/JavaScript/CAD/node_modules/vue/dist/vue.runtime.esm-bundler.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { initCustomFormatter, warn } from '@vue/runtime-dom';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

tsconfig.json

：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "sourceMap": true,
    "allowJs": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

package.json

：

{
  "name": "cad",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "dev": "vite",
    "test": "jest",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.0.33",
    "sass": "^1.58.3",
    "scss": "^0.2.4",
    "three": "^0.150.1",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@types/jest": "^29.5.5",
    "@types/node": "^18.15.11",
    "@types/three": "^0.149.0",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.36.0",
    "eslint-plugin-vue": "^9.10.0",
    "esm": "^3.2.25",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "ts-jest": "^29.1.1",
    "typescript": "^4.9.5",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }
}

Answer 1

我发现

OrbitControls

可以从单独的库安装。我安装了它并将导入更改为

import {OrbitControls} from "three-orbitcontrols-ts";

这有效！

不幸的是，这个实现具有与我使用的不同的接口，并且我需要更改其属性的名称引用。所以我认为我破坏了使用它的功能，但我不在乎，我只需要运行测试。