支持 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

我进行了很多搜索并尝试了很多类似这样的答案，但仍然遇到同样的问题-_-而且我很困惑是否需要安装 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 瘦包装器，允许使用 TypeScript 运行时（ts-node）运行 TypeScript 测试，以摆脱编译复杂性。 所有 Mocha 功能都可以不受任何限制地使用。 请参阅文档。

将此 ts 配置用于测试tsconfig.testing.json 。

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

这是一个基本配置，您可以根据需要对其进行更新

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

那么您应该注意导入可能会遇到问题的文本文件。 这将导致令牌错误，因此将它们移动到另一个文件并确保您的utils函数是纯函数，因为您运行单元测试。

另一个重要注意事项：您应该设置"module": "commonjs"来解决冲突问题，例如您Cannot use import statement outside a module 。

2. 使用带有ts-node/register的普通mocha来执行 TypeScript。 检查文档

• 您应该安装ts-node和cross-env以使用新的tsconfig.testing.json 。
• 这是tsconfig.testing.json的简单配置。 请注意，您应该添加到 up 配置moduleResolution to node Check 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"
  ]
}