Jest не передает тестируемые модули ES6 (SyntaxError: неожиданный экспорт токена)

Я нахожусь в точке кипения с тем, чтобы заставить Jest понять синтаксис импорта / экспорта модулей ES6, и это мешает моему прогрессу в разработке проекта. Моя структура проекта следующая:

root module
  org-domain (ES6)
  org-services (ES6)
  react-ui-module (React via CRA2)

org-services имеет зависимость локального пути от org-domain в своем пакете json:

// in org-services package.json

"dependencies": {
   "@org/domain": "file:../org-domain",
},

Мой .babelrc в org-services выглядит следующим образом:

{
  "env": {
    "test": {
      "presets": ["@babel/preset-flow", "@babel/preset-env"]
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  },
  "presets": [
    "@babel/preset-flow",
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      }
    }]
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./node_modules/@org/domain"],
      "alias": {
        "@org/constants": "./node_modules/@org/domain/src/constants",
        "@org/contracts": "./node_modules/@org/domain/src/request-contracts"
      }
    }]
  ]
}

Я не знаю, связана ли проблема с тем, как я включаю свои зависимости, поэтому для ясности я собираюсь добавить более подробную информацию обо всем, что связано с моим импортом / экспортом этих модулей.

В файлах реализации org-services я импортирую org-domain, используя синтаксис с областью действия npm, например: import ... from '@org/domain

Вот несколько моих наблюдений:

При локальной разработке, когда я пытаюсь сослаться на щелчок @org/domain, вместо того, чтобы быть перенаправленным на org-services/node_modules/@org/domain, я перенаправлялся в фактическое относительное расположение каталога, которым является root/org-services. Я считаю, что Jest игнорирует node_modules (поправьте меня, если я ошибаюсь), но в моем jest.config.js для org-services у меня есть:

collectCoverage: true,
coverageDirectory: 'coverage',
coveragePathIgnorePatterns: [
  '/node_modules/'
],
moduleDirectories: [
  'src',
  'node_modules'
],
moduleFileExtensions: [
  'js'
],
transform: {
  '^.+\\.js$': 'babel-jest'
},
transformIgnorePatterns: [
  'node_modules/(?!@org/domain)$'
]

Насколько я понимаю, все должно работать прямо сейчас со всей конфигурацией, которая у меня есть в отношении установки плагина @babel/plugin-transform-modules-commonjs в тесте (в .babelrc) и включения инструкции '^.+\\.js$': 'babel-jest' под ключом transform в jest.config.js, расположенном в org-services - но это не так.

Я пробовал все, что мог найти в Интернете по этой проблеме, но безуспешно. С тех пор я ничего не добился, и мое терпение потеряно из-за этой среды тестирования и отсутствия поддержки ES6. Это не должно быть так сложно, поэтому очевидно, что я здесь что-то делаю не так. Пожалуйста, порекомендуйте.

Обновление 1

Нашел еще одно сообщение SO, которое является зеркалом этой ситуации, в которой я нахожусь. Jest не может транспилировать импорт из связанного модуля npm

К сожалению, в моем случае предложенное решение не работает.

Вы добились в этом прогресса?

42tg 09.11.2018 16:17

@ 42tg Мне не удалось решить эту проблему. В конце концов, в полном разочаровании, мне пришлось объединить мой отдельный проект, упакованный с организационным модулем, в единый монолитный пакет. Тот факт, что многопакетная настройка проекта Yarn-workspace не поддерживается из коробки, вне меня.

Danchez 15.11.2018 23:39
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
4
2
1 759
1

Ответы 1

После обновления с @ babel / xyz: 7.0.0 до 7.1.2 я начал получать сообщение об ошибке "импорт"

Jest encountered an unexpected token

<snip>

Details:

C:\....\SstcStrategy.test.js:2
import sequelizeFixtures from 'sequelize-fixtures';
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Чтобы исправить это, мне пришлось добавить @babel/plugin-transform-modules-commonjs, как вы упомянули в своем вопросе.

Мой babel.config.js теперь выглядит так:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: '8.10',
        },
        debug: false,
      },
    ],
  ],
  ignore: ['node_modules'],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-modules-commonjs',

    // Stage 2
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',

    // Stage 3
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings',
  ],
};

Также, кстати, вам не нужно определять преобразование babel-jest в jest.config.js, поскольку это настройка по умолчанию.

Надеюсь это поможет

Другие вопросы по теме