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

IT技术 javascript reactjs typescript unit-testing mocha.js
2021-05-02 08:17:28

你好，我是react和typescript的新手。我创建了一个应用程序react-create-app并添加了typescript。完成应用module后，我想做一些单元测试，我已经安装了 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

我寻觅了很多，并试图一吨像回答的这一个，但仍然会碰到同样的问题-_-我很困惑我是否需要安装通天塔？这是我的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"
  ]
}

我怎么能正确设置一切？

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/*"

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

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

  1. 将 normal mochawithts-node/register用于 TypeScript 执行。检查文档
  • 您应该安装ts-node并cross-env使用新的tsconfig.testing.json.
  • 这是一个简单的配置tsconfig.testing.json。请注意，您应该添加到最高配置moduleResolution，以node检查这里了解更多详情。将路径添加到您的声明类型（如果有）以避免 type 错误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 Redux - 如何存储表单状态，以便在用户返回页面时可以再次填充它 下一篇连接向导到 redux