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

Question

你好，我是 React 和 TypeScript 的新手。我用 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"
  ]
}

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

Answer 1

有02个选项

使用 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.

使用正常的 mocha 和 ts-node/register 执行 TypeScript。 Check the documentation

您应该安装 ts-node 和 cross-env 以使用新的 tsconfig.testing.json。
这是 tsconfig.testing.json 的简单配置。请注意，您应该将 moduleResolution 添加到 node 中，检查以获取更多详细信息。如果有任何路径，请将路径添加到您的声明类型以避免 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"
  ]
}

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

react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?

javascript

unit-testing

mocha.js

typescript

reactjs