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?

问题描述

您好，我是 React 和打字稿的新手.我用 react-create-app 创建了一个应用程序并添加了打字稿.完成应用模块后，我想做一些单元测试，我已经安装了 mocha 和 chai:npm install --save-dev mocha chai.

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

从 'chai' 导入 {assert}从../components/File"导入{文件}；

我遇到了一个问题

从 'chai' 导入 {assert}^^^^^^语法错误:不能在模块外使用导入语句

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

{...依赖关系":{@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"，类名":^2.2.6"，节点-sass":^5.0.0"，反应":^ 17.0.1"，react-dom":^17.0.1"，反应脚本":4.0.3"，打字稿":^4.2.3"，网络生活":^1.1.1"},脚本":{开始":反应脚本开始"，构建":反应脚本构建"，测试":跨环境 TS_NODE_PROJECT=\"tsconfig.testing.json\";摩卡 src/test/*",弹出":反应脚本弹出"；},...开发依赖":{@types/chai":^4.2.16"，@types/mocha":^8.2.2"，柴":^4.3.4"，跨环境":^7.0.3"，摩卡":^8.3.2"}}

这是我的 tsconfig.json

{编译器选项":{目标":es5"，库":[dom"，dom.iterable"，esnext"],allowJs":真，skipLibCheck":真，esModuleInterop":真，allowSyntheticDefaultImports":真，严格":真实，forceConsistentCasingInFileNames":真，noFallthroughCasesInSwitch":真，模块":esnext"，模块分辨率":节点"，resolveJsonModule":真，isolatedModules":真，noEmit":真，jsx":react-jsx"},包括":[源代码"]}

如何正确设置所有内容?

解决方案

有 02 个选项

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

<块引用>

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

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

{编译器选项":{模块":commonjs"，目标":es5"},包含":[src/test/*"]}

<块引用>

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

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

<块引用>

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

<块引用>

另一个重要注意事项:您应该设置 "module":"commonjs" 来解决冲突问题，例如您的不能在模块外使用 import 语句.>

2. 使用普通 mocha 和 ts-node/register 来执行 TypeScript.查看文档

• 您应该安装 ts-node 和 cross-env 以使用新的 tsconfig.testing.json.
• 这是tsconfig.testing.json 的简单配置.请注意，您应该将向上配置 moduleResolution 添加到 node 检查 此处 了解更多详情.将路径添加到您的声明类型(如果有)以避免 error TS2304: 找不到名称type_name" 类型的错误.
• 将脚本添加到 package.json 脚本:cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\";mocha -r ts-node/register src/test/*

{ts-节点":{文件":true},编译器选项":{目标":es5"，模块":CommonJS"，模块分辨率":节点"；},包括":[源代码"],排除":[./node_modules/",./dist/"],文件":[path_to_your_types_declaration"]}

Hello I am new to react and typescript. I have created an app with react-create-app and added typescript. After finishing app modules I wanted to do some unites test I have installed mocha and chai: npm install --save-dev mocha chai.

in my pakacge.json I have updated test script to "test": "mocha src/test/*". After using an import in my test file

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

I run into an issue

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

SyntaxError: Cannot use import statement outside a module

I have searched a lot and tried a ton of answers like this one but still run into the same issue -_- And I am confused whether I need to install babel? Here is my package.json any explanation

{
  ...
    "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"
    }
  }

Here is my 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"
  ]
}

How could I set up everything correctly?

解决方案

There is 02 options

1. using ts-mocha the short way => 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.

use this ts configuration for the test tsconfig.testing.json.

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

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

Add script to package.json scripts: "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.

2. use normal mocha with ts-node/register for TypeScript execution. Check the documentation

• you should install ts-node and cross-env to use the new tsconfig.testing.json.
• This is a simple configuration for the tsconfig.testing.json. Note you should add to the up configuration moduleResolution to node Check here for more details. Add the path to your declaration types if there is any to avoid errors of type error TS2304: Cannot find name "type_name".
• Add script to package.json scripts: 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模块的正确设置是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！