设置testing-library/react，使用mocha Set :意外的令牌

Question

我正在用mocha设置testing library/react。我在安装过程中遇到了很多问题，这些问题都是通过安装babel库并在.babelrc文件中配置它们来解决的，如本问题最下面部分所述。现在，我陷入了这个错误：

> mocha --exit --require @babel/register --require jsdom-global/register
D:\projects\demo_app\node_modules\antd\es\row\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Row } from '../grid';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)

这来自使用上述语法的ant.design组件。我试着测试一个虚拟组件，如下所示：

const component = () => (<div>hello</div>)

而且它没有任何问题。但是，每当我导入需要使用ant设计进行测试的实际组件时，我都会收到上面的错误。是不是巴别塔的安装部件配置不正确？我不知道如何修复这个错误。不知何故，我猜测它可能与babel预设或插件有关。

附注:我的项目使用的是Create React App，与Jest完全相同的测试运行得很顺利，但出于某种原因，我不想使用jest。

下面是.babelrc

{
  "presets": [
    ["@babel/preset-env",
      {
        "targets": {
          "esmodules": true,
          "node": "current"
        }
      }
    ],
    ["@babel/preset-react"]
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties"],
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "underscore": "lodash"
      }
    }]
  ]
}

下面是package.json

{
  "dependencies": {
    "antd": "^4.4.2",
    "axios": "^0.19.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-google-oauth": "^1.0.0",
    "react-icons": "^3.10.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "recompose": "^0.30.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.0.1",
    "validator": "^13.1.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "mocha --exit --require @babel/register --require jsdom-global/register",
    "test:jest": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "7.12.7",
    "@babel/register": "7.12.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "babel-eslint": "10.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "chai": "4.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint-plugin-flowtype": "^3.13.0",
    "eslint-plugin-import": "^2.20.1",
    "husky": "^4.2.1",
    "jsdom": "^16.4.0",
    "jsdom-global": "^3.0.2",
    "mocha": "8.2.1",
    "msw": "^0.19.5",
    "react-test-renderer": "^16.13.1",
    "redux-mock-store": "^1.5.4",
    "standard": "^14.3.1"
  },
  "optionalDependencies": {
    "fsevents": "^2.1.2"
  },
  "standard": {
    "parser": "babel-eslint",
    "ignore": [
      "/public"
    ]
  },
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/?!(react)/"
    ]
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]
}

任何帮助都将不胜感激。

Answer 1

你有强制Babel使用ES模块的"esmodules": true。这意味着如果您使用Node，它需要支持ES模块，并且您需要将测试放在.mjs文件中，或者将"type": "module"放在package.json中。如果不支持此功能，或者您希望支持较旧的节点版本，请从您的Babel配置中删除"esmodules": true以启用与CJS模块的兼容性。