Can't run jest tests with three objects in vite vue ts three project

Question 1

This is my test:

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',
};

When I run it with jest I get:

/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

When I change jest.config.cjs:

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

And run, I get:

/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";

When I run it with NODE_OPTIONS=--experimental-vm-modules jest as stated in jest documentation! I get:

/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"
 }
}

Question 2

Jest has notoriously bad support for ESM. It simply doesn't work most of the time. If you have the ability to use a different test runner, my suggestion is to try that. Mocha, or even Bun might be better for you if this is a new project. I tried and failed getting this to work in multiple projects after trying all suggested paths and options.

Question 3

@Derek There's nothing inherently bad in Jest afaik, it's experimental and there may be natural limitations regarding ESM mocking due to the way it works. You're suggesting Mocha but it doesn't handle module mocking at all.

Question 4

I found that OrbitControls can be installed from separate library. I installed it and changed import to

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

And that worked!

Unfortunately, this implementation has different interface, than used by me, and I was required to change its properties' names references. So I think I broke functionality that used it, but I didn't care, I only needed tests running.

Intolighter 4223 silver badges13 bronze badges · Accepted Answer · 2023-11-21 09:42:57Z

I found that OrbitControls can be installed from separate library. I installed it and changed import to

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

And that worked!

Unfortunately, this implementation has different interface, than used by me, and I was required to change its properties' names references. So I think I broke functionality that used it, but I didn't care, I only needed tests running.

CollectivesTM on Stack Overflow

Can't run jest tests with three objects in vite vue ts three project

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related