javascript - 支持 es6 模块的正确设置是什么？

Question

我使用 create-react-app 创建了一个应用程序并添加了 typescript。完成应用程序模块后，我想做一些联合测试，我安装了 mocha 和 chai:npm install --save-dev mocha chai。

在我的 pakacge.json 中，我已将测试脚本更新为 "test": "mocha src/test/*"。在我的测试文件中使用导入后

import {assert} from 'chai'
import {File} from "../components/File"

我遇到了一个问题

import {assert} from 'chai'
^^^^^^

SyntaxError: Cannot use import statement outside a module

我搜索了很多并尝试了很多答案，例如 this one但仍然遇到同样的问题 -_- 我很困惑是否需要安装 babel？这是我的package.json任何解释

{
  ...
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.9",
      "@testing-library/react": "^11.2.5",
      "@testing-library/user-event": "^12.8.3",
      "@types/classnames": "^2.2.11",
      "@types/jest": "^26.0.22",
      "@types/node": "^14.14.37",
      "@types/react": "^17.0.3",
      "@types/react-dom": "^17.0.3",
      "classnames": "^2.2.6",
      "node-sass": "^5.0.0",
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-scripts": "4.0.3",
      "typescript": "^4.2.3",
      "web-vitals": "^1.1.1"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha src/test/*",
      "eject": "react-scripts eject"
    },
    ...
    "devDependencies": {
      "@types/chai": "^4.2.16",
      "@types/mocha": "^8.2.2",
      "chai": "^4.3.4",
      "cross-env": "^7.0.3",
      "mocha": "^8.3.2"
    }
  }

这是我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

我怎样才能正确设置所有内容？

Answer 1

有02个选项

1. 使用 ts-mocha 的捷径 => npm install --save-dev ts-mocha

Mocha thin wrapper that allows running TypeScript tests with TypeScript runtime (ts-node) to get rid of compilation complexity. All Mocha features are available without any limitation. See documentation.

使用此 ts 配置进行测试 tsconfig.testing.json。

{
  "compilerOptions": {
      "module": "commonjs",
      "target": "es5"
  },
  "include": ["src/test/*"]
}

This a basic configuration you can update it according to your need

将脚本添加到package.json脚本:"test-ts": "ts-mocha -p tsconfig.testing.json src/test/*"

Well you should pay attention for importing text files that may run into issues. it will lead to token errors so move them to another files and make sure your utils functoins to be pure functions since you run unit test.

Another important note: You should set "module": "commonjs" to fix conflict issues, like yours Cannot use import statement outside a module.

1. 使用普通 mocha 和 ts-node/register 执行 TypeScript。 Check the documentation

• 您应该安装 ts-node 和 cross-env 以使用新的 tsconfig.testing.json。
• 这是 tsconfig.testing.json 的简单配置。请注意，您应该将 moduleResolution 添加到 node 检查 here更多细节。将路径添加到您的声明类型(如果有)以避免类型错误 error TS2304: Cannot find name "type_name"。
• 将脚本添加到 package.json 脚本:cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\"mocha -r ts-node/register src/test/*

{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "target": "es5",
    "module": "CommonJS",
    "moduleResolution": "node"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "./node_modules/",
    "./dist/"
  ], 
  "files": [
    "path_to_your_types_declaration"
  ]
}