Setting up tests with mocha for codebase with javascript and typescript

[Oui Monsieur]

I'm trying to learn how to set up Mocha testing. My codebase is written in typescript, but some modules seem to be javascript, which causes this error:

C:\work\three\node_modules\three\examples\jsm\loaders\GLTFLoader.js:1
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module

Adding "type": "module" to package.json didn't work, and using ts-mocha ends up in the same scenario. My setup is:

package.json

{
  "main": "index.tsx",
  "scripts": {
    "ci": "npx webpack",
    "dev": "cls && tsm .\\src\\scss\\export.scss .\\src\\T --implementation sass -n camel && webpack --env.isDev --watch --colors",
    "lint": "npx eslint --quiet . ",
    "prod": "cls && && tsm .\\src\\scss\\export.scss .\\src\\T --implementation sass -n camel && webpack --colors",
    "prod-w": "cls && webpack  --watch --colors",
    "test": " env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --extension js,ts,tsx   --require ts-node/register/transpile-only -r tsconfig-paths/register 'src/__tests/mocha/**/*.tsx'"
  },

  "devDependencies": {
    "@types/chai": "^4.2.14",
    "@types/dat.gui": "^0.7.5",
    "@types/expect": "^24.3.0",
    "@types/mocha": "^8.0.4",
    "@types/node": "^14.14.10",
    "@types/webpack-env": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^3.10.1",
    "@typescript-eslint/parser": "^3.10.1",
    "camera-controls": "^1.22.1",
    "chai": "^4.2.0",
    "core-js": "^3.6.5",
    "dat.gui": "^0.7.7",
    "eslint": "^7.14.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsdoc": "^30.7.8",
    "eslint-plugin-prefer-arrow": "^1.2.2",
    "mocha": "^8.2.1",
    "postprocessing": "^6.17.1",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^0.2.4",
    "three": "^0.123.0",
    "ts-loader": "^6.2.2",
    "ts-mocha": "^8.0.0",
    "ts-node": "^9.0.0",
    "tsconfig-paths": "^3.9.0",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "typed-scss-modules": "^1.3.0",
    "typescript": "^3.9.7",
    "url-loader": "^4.1.0",
    "webgl-debug": "^2.0.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "style-loader": "^1.1.3"
  }
}

tsconfig.test.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["dom", "es2015", "es2017"],
    "target": "es5",
    "allowJs": true,
    "checkJs": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "types": ["mocha"]
  },
  "ts-node": {
    "files": true
  },
  "include": ["src/**/*.tsx","src/__tests","./**/*.js","./src/**/*.ts"],
  "exclude": ["dist", "node_modules","db","config","src/dist","src/php","src/im","src/fonts","src/scss"]
}

This is the test I run, mocha.js:

import 'mocha';
import * as chai from 'chai';
import {expect} from 'chai';
import App from '@views/app/App';
import UI from "@ui/UI";

chai.should();

describe('Options tests', () => {
    it('checking default options', () => {
        const app = new App();

        expect(app.ui).to.be.instanceOf(UI);
    });
});

 Any hints?

Thanks.

[Vlad GURDIGA]

Hi! 👋🙂

Yes, Mocha needs a bit of setup to work with TypeScript. 🙂

Please take a look at this article and see if it helps: 🤓

https://dev.to/matteobruni/mocha-chai-with-typescript-37f

Good luck! 👋

[Oui Monsieur]

Thanks for the hint!

Unfortunately, none of the of the solutions I've found in any forum (say dev, medium, stack overflow, personal blogs...) works for me. Most of them seem to assume that all the codebase is either js or ts, but not a mix. Those that don't, like the one that pointed me towards ts-mocha, fail when external libraries (some libraries within threejs in my case) are in js.