jeudi 3 décembre 2020

Seting up tests with mocha for codebase with javascript and typescript

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

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);
    });
});

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

Thanks.

Aucun commentaire:

Enregistrer un commentaire