javascript - 使用 mocha 为带有 javascript 和 typescript 的代码库设置测试

Question

我正在尝试学习如何设置 Mocha 测试。我的代码库是用打字稿编写的，但有些模块似乎是 javascript，这会导致此错误：

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

SyntaxError: Cannot use import statement outside a module

我的设置是：

包.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"]
}

这是我运行的测试 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);
    });
});

添加"type": "module"到 package.json 不起作用，并且使用 ts-mocha 最终会出现在相同的场景中。有什么提示吗？

谢谢。

标签： javascripttypescripttestingmocha.js