Блог

Я настраиваю testing-library / react с помощью mocha. Столкнулся с множеством проблем при настройке, которые были решены путем установки библиотек babel и их настройки в .babelrc файле, как описано в нижней части большей части этого вопроса. Теперь я застрял на этой ошибке:

 > mocha --exit --require @babel/register --require jsdom-global/register
D:projectsdemo_appnode_modulesantdesrowindex.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 design, я получаю сообщение об ошибке выше.
Это часть настройки для babel не настроена должным образом? Я понятия не имею, как исправить ошибку. Почему-то есть предположение, что это может быть связано с предустановками или плагинами babel.

PS В моем проекте используется приложение Create React, точно такой же тест проходит гладко с 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"
  ]
}

 

Любая помощь будет признательна.

У вас есть "esmodules": true , что заставляет Babel использовать модули ES. Это означает, что если вы используете Node, он должен поддерживать модули ES, и вам нужно либо иметь свои тесты в .mjs файлах, либо иметь "type": "module" package.json . Если это не поддерживается или вы хотите поддерживать более старые версии узлов, удалите "esmodules": true из конфигурации Babel, чтобы включить совместимость с модулями CJS.