react create app, typescript unit test with mocha and chai 支持es6模块的正确设置是什么？

如何解决react create app, typescript unit test with mocha and chai 支持es6模块的正确设置是什么？

您好，我是 React 和打字稿的新手。我用 react-create-app 创建了一个应用程序并添加了打字稿。完成应用模块后，我想做一些单元测试，我已经安装了 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"
  ]
}

如何正确设置所有内容？

解决方法

有 02 个选项

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

Mocha 瘦包装器，允许使用 TypeScript 运行时 (ts-node) 运行 TypeScript 测试以摆脱编译复杂性。所有 Mocha 功能均可使用，没有任何限制。 See documentation。

将此 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. 使用普通的 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"
  ]
}