Неочікуваний імпорт маркерів Babel під час запуску тестів мокко


92

Рішення, запропоновані в інших супутніх питаннях, таких як включення відповідних пресетів (es2015) у .babelrc, вже реалізовані в моєму проекті.

У мене є два проекти (давайте назвемо їх A і B), які обидва використовують синтаксис модуля ES6. У проекті A я імпортую проект B, який встановлюється через npm і живе в папці node_modules. Коли я запускаю свій набір тестів для проекту A, я отримую повідомлення про помилку:

SyntaxError: Несподіваний імпорт маркера

Якому передує цей нібито помилковий рядок коду з проекту B:

(функція (експортує, вимагає, модуль, __файл, __дім'я) {імпортувати createBrowserHistory з 'history / lib / createBrowserHistory';

Здається, iife є чимось пов'язаним з npm або, можливо, з babel, оскільки мій вихідний файл містить лише "import createBrowserHistory from 'history / lib / createBrowserHistory'; модульні тести в тестовому наборі Project B працюють нормально, і якщо я видалю Project B як залежність від Проект A, мій набір тестів тоді (все ще використовуючи імпорт es6 для внутрішніх модулів проекту) працює чудово.

Повна траса стека:

 SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:405:10)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (actionCreators.js:4:17)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/ProjectA/src/components/core/wrapper/wrapper.js:28:23)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/ProjectA/src/components/core/wrapper/wrapperSpec.js:15:16)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /ProjectA/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/ProjectA/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/ProjectA/node_modules/mocha/lib/mocha.js:468:10)
    at Object.<anonymous> (/ProjectA/node_modules/mocha/bin/_mocha:403:18)
    at Module._compile (module.js:398:26)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:430:10)
    at startup (node.js:141:18)
    at node.js:980:3

Ось моя тестова команда з package.json:

"test": "mocha --compilers js:babel-core/register '+(test|src)/**/*Spec.js'"

Цей допис StackOverflow подібний, але не пропонує рішення для мого використання командного рядка: імпортувати модуль із node_modules з babel, але не вдалося


1
Якщо ви поширюєте модуль на npm, вам слід розповсюджувати лише трансліровану версію цього модуля.
loganfsmyth

Цей проект дуже легкий. Він призначений здебільшого для мого власного використання або для інших, якщо у них є процес транспірації, який може його підтримати. Я намагаюся досягти "ванілі es6" у цих залежностях.
ThinkingInBits

2
Я думаю, ви забули налаштувати babel в package.json. додайте їх у свій пакет.json "babel": {"пресети": ["es2015"]}
Яків

3
Примітка: згідно з документацією --compilers не потрібно, --require babel-registerзамість цього слід використовувати: "Якщо ваші модулі ES6 мають розширення .js, ви можете npm встановити --save-dev babel-register і використовувати mocha --require babel-register; --compilers необхідний, лише якщо вам потрібно вказати розширення файлу. "
try-catch-нарешті

1
Нарешті, я зміг змусити це працювати, використовуючи "babel":{"presets": ["es2015"]}це було останнє, чого мені не вистачало!
Брендон

Відповіді:


79

Для Бабеля <6

Найпростіший спосіб вирішити цю проблему:

  1. npm install babel-preset-es2015 --save-dev
  2. Додайте .babelrcдо кореня проекту із вмістом:

    {
     "presets": [ "es2015" ]
    }
    

Переконайтеся, що у вас запущена мокко з параметром "--compilers js: babel-core / register".

Для Babel6 / 7 +

  1. npm install @babel/preset-env --save-dev
  2. Додайте .babelrcдо кореня проекту із вмістом:

    {
     "presets": [ "@babel/preset-env" ]
    }

Переконайтеся, що у вас працює мокко з параметром --compilers js:babel-register(Babel 6) або --compilers js:@babel/register(Babel 7)

Для версії mocha 7 або пізнішої версії використовуйте --require babel-registerабо --require @babel/registerвідповідно.


27
спробуйте запустити мокку за допомогою --require babel-register param
kolec

2
@kolec Це працює. Ще краще, хоча, створити mocha.optsфайл у кореневій директорії / test і додати його туди
Мартін Доусон,

3
Все це разом все одно не допомагає (командний рядок, а не mocha.opts).
Кев

3
Якщо ви хочете використовувати es2016, майте на увазі, що es2016 у Babel "Компілює лише те, що знаходиться в ES2016 до ES2015", тому вам потрібні як es2016, так і es2015 у вашому
пресетному

4
--compilersзараз застаріла. Використовуйте --requireзамість цього.
Робш

46

Здається, єдиним рішенням є явне включення:

require('babel-core/register')({
  ignore: /node_modules/(?!ProjectB)/
}); 

у тестовому допоміжному файлі та передайте це мокві в моїй тестовій команді:

mocha --require ./test/testHelper.js...

Остаточне рішення:

Додайте registerBabel.js : окремий файл, завданням якого є вимагати babel-core / register ...

require('babel-core/register')({
  ignore: /node_modules/(?!ProjectB)/
});

Додайте entry.js, якщо ваша програма також покладається на babel-node. Це діє як обгортка для програми, що містить es6.

require('./registerBabel');
require('./server'); // this file has some es6 imports

Потім ви запускали свою програму за допомогою node entry

Для тестування мокко тестHelper.js повинен вимагати registerBabel.js, а також ініціалізувати підтримку babel під час виконання.

require('./registerBabel');

І проведіть свої тести на мокку з mocha --require ./testHelper.js '+(test)/**/*Spec.js'

Це буде рекурсивно перевіряти будь-який файл, який закінчується на "Spec.js" у "./test". Замініть шаблон таким, що відповідає специфікаціям у вашому проекті.


3
Здається, ignoreрегулярний вираз трохи відхилений. Мені довелося додати зворотну скісну риску, що відхиляється, відразу після node_modules: ignore: /node_modules\/(?!ProjectB)/для того, щоб файл babelRegister працював. Інакше здається чудовим!
hellatan

Це не дозволяє нам використовувати Rollupify через оператори require. Чи знаєте ви про спосіб зробити це, не використовуючи оператори require?
MikesBarto2002

Це чудово, але як щодо інструментів, які не дозволяють додавати такий код і хочуть запускати ваші файли безпосередньо. Тоді ви в кінцевому підсумку babel-nodeне дозволяєте такого використання .babelrc.
Євгеній

1
ти чудовий! Babel обробляв мій код ES6, коли просто запускав сервер, але тестування мокко не вдалося. Ваша відповідь це вирішила. Я спробував --compilers у mocha.opts, але це спричинило помилку операторів імпорту.
Енергійні пікселі

1
Мені не вдалося змусити це працювати, але виявилося, мені також потрібно продовжити свій babelrc: `` require ('@ babel / register') ({extends: './.babelrc', ignore: [/ node_modules \ / (?! ProjectB) /]}); ``
TiggerToo

26

Упевнений, у вас буде така проблема, ви використовуєте ES6, якого мокко не знає

Отже, ви використовуєте babel, але не використовуєте його у своєму тесті ...

Кілька рішень:

А. якщо ви працюєте з використанням NPM

"test": "mocha --compilers js:babel-core/register test*.js"

Б. Я використовую

"test": "./node_modules/.bin/mocha --compilers js:babel-core/register **/*spec.jsx"

C. З клі:

mocha --compilers js: babel-core / test test * .js

Ви можете прочитати більше на http://www.pauleveritt.org/articles/pylyglot/es6_imports/


1
Дуже дякую! Мені не вистачало опції --compilers js: babel-core / register
mycargus

1
Я вже робив це ... Ви навіть читали початкове запитання?
ThinkingInBits

1
@ThinkingInBits Що ви в результаті використали, як вирішили проблему (якщо так)? У мене тут серйозні проблеми, спробував більшість із цих варіантів
Мілан Велебіт

--compilersзараз застарілий, схоже, --requireце єдиний безпечний варіант
Алі Ганаватян

23

Я зіткнувся з тим самим питанням. Спробувавши будь-яке інше рішення на stackoverflow і не тільки, додавши цю просту конфігурацію на package.json, це зробив для мене:

  "babel": {
    "presets": [
      "es2015"
    ]
  }

Після цього весь мій імпорт ES6 працював. До речі, у мене була така сама конфігурація всередині webpack.config.js, але, мабуть, це був єдиний спосіб змусити це працювати і для тестування мокко.

Сподіваюся, це комусь допомагає.


у мене був файл .babelrc написаний неправильно, тому він спочатку не працював. Це рішення працює і є рекомендованим рішенням. Створіть файл .babelrc у своєму проекті та додайте {"пресети": ["es2015"]}
AfDev

14

Я мав {"modules": false}у своєму файлі .babelrc ось такий:

"presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
]

який кидав

Несподіваний імпорт маркера

Як тільки я його видалив, мокко успішно запустився.


Це було створено Webpacker для Rails: `` ` "useBuiltIns": true}], "реагуйте" `` Щойно я видалив рядок модулів, він спрацював для мене.
emptywalls

Це вирішило мою проблему, коли CircleCI не міг запустити мої юніт-тести і видав мені несподівану помилку імпорту маркера. +1!
Candlejack

Це зробило це для мене. Rails, Webpacker тощо ... Дякую!
emptywalls

8

У мене була та сама проблема, і я її виправив, прочитавши з документації babel для інтеграції Babel з Mocha:

{
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

Для якої версії Mocha та Babel?
Огнян Димитров

Мої версії Babel 6.26.0крім "babel-preset-env": "1.6.0"і "mocha": "3.5.3"
bhantol

Дивно. Це вирішило мою проблему і в моєму випадку було чистою проблемою прочитання документа.
Огнян Димитров

6

Для тих, хто використовує Babel 7 та Mocha 4, деякі назви пакетів трохи змінилися, і прийнята відповідь трохи застаріла. Що мені потрібно було зробити:

npm install @babel/register --saveDev

і додавання --require @babel/registerдо тестового рядка вpackage.json

"test": "./node_modules/mocha/bin/mocha --require @babel/polyfill --require @babel/register './test/**/*.spec.js'"

Виправлено @babel/polyfillдеякі речі, такі як функція async / await, якщо ви випадково використовуєте їх.

Сподіваюся, це комусь допоможе :)


3

--compilers застаріло.

Моє просте рішення:

npm install --save-dev babel-core

А в пакет.json додайте свій тестовий скрипт так:

  "scripts": {
    "test": "mocha --require babel-core/register ./test/**/*.js -r ./test-setup.js"
  },

3

Я додаю сюди ще одну відповідь ES6 + mocha + babel config, актуальну станом на червень 19 (див. Дати в відповіді / коментарі). mocha застарів --compilerпрапор, і версія, яку я використовую, має таку, що недоступна навіть із --no-deprecationпрапором, див. це

Зауважте, що я не включатиму всі відповідні біти зі зв’язаних сторінок, оскільки жоден з них не привів мене до чистого тестового складання, заснованого на останніх версіях mocha та babel; ця відповідь повинна включати кроки, які привели мене до успішної побудови тесту.

Дотримуючись інструкцій тут, і в цій відповіді , і тут , я спробував встановити, як видається, мінімальний останній babel, використовуючи npm install:

$ npm install --save-dev mocha
$ npm install --save-dev @babel/preset-env

І я відрегулював виклик мокки в package.json, приблизно так:

"scripts": {
    "test": "mocha --compilers js:@babel/register"
}

Це призвело до помилок:

× ERROR: --compilers is DEPRECATED and no longer supported.

Як і вище, --no-deprecationце не допомогло, будь ласка, зверніться до сторінки, на яку посилається вище. Тож, дотримуючись інструкцій звідси, я відрегулював package.json:

"scripts": {
    "test": "mocha --require js:@babel/register"
}

І почав бачити помилки щодо пошуку модулів Babel, такі як:

× ERROR: Cannot find module '@babel/register'

На цьому етапі я почав встановлювати пакети babel, поки не зміг прогресувати. Я вважаю, що повна установка приблизно така:

$ npm install --save-dev @babel/preset-env @babel/register @babel/core

Останньою необхідною зміною було оновлення виклику мокки в package.json, видаливши js:префікс приблизно так:

"scripts": {
    "test": "mocha --require @babel/register"
}

Я не можу відповісти, чому це було необхідно: якщо хтось може відповісти на це, будь ласка, залиште коментар, і я оновлю відповідь кращою інформацією.

Останнє, що я зробив, - це створити .babelrc у каталозі проекту із вмістом:

{
    "presets" : ["@babel/preset-env"]
}

Я не можу згадати, що спонукало це, але я вважаю, що це було тому, що мокко продовжував скаржитися на нерозпізнавання importключового слова в моєму test.js. Як і вище, якщо хтось може відповісти на це, будь ласка, залиште коментар, і я оновлю свою відповідь кращою інформацією.


На даний момент я можу успішно проводити свої тести на мокку. Я усвідомлюю, що тут є прогалини в моїх знаннях: я написав багато виробничого коду javascript, але я відносний вузол noob. Будь-хто, хто бачить це, щоб додати до відповіді більше, залиште коментар, і я покращу відповідь, АБО залиште свою власну кращу відповідь.
pb2q

2

Я знайшов найпростіший спосіб зробити з babel 6.XX використання nyc, а потім додати helperфайл у файлpckage.json

Отже, ось що я використав

package.json

{
  ....
  "scripts": {
    "test": "nyc mocha --reporter tap 'test/**/*.spec.js'"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.24.0",
    "babel-runtime": "^6.23.0",
    "chai": "^3.5.0",
    "mocha": "^3.2.0",
    "nyc": "^10.1.2",
    "webpack": "^2.3.3",
    "webpack-config": "^7.0.0",
    "webpack-dashboard": "^0.3.0",
    "webpack-dev-server": "^2.4.2"
  },
  "nyc": {
    "all": true,
    "include": [
      "src/**/*.js"
    ],
    "cache": true,
    "require": [
      "./test/helper/registerBabel.js"
    ]
  }
}

babelrc

{
  "presets": [
    "es2015", //remove the {modules: false} it doesn't work with this
    "stage-2"
  ]
}

registerBabel.js

/* eslint-disable import/no-commonjs, import/unambiguous */
require('babel-register')();

Тепер ви зможете використовувати es6 у своїх тестах або де завгодно. Мої всі не вдаються;)

Тоді npm run testце буде спрацьовуватиnyc mocha --reporter tap 'test/**/*.spec.js'


2

Ось, що мені вдалося. Я отримав попередження під час використання --compilersпрапора.

DeprecationWarning: "--compilers" буде видалено в майбутній версії Mocha; див. https://git.io/vdcSr для отримання додаткової інформації

Тому я замінив його --requireпрапором

"test":  "mocha --require babel-core/register --recursive"

Ось мій .babelrc:

{
  "presets": ["env"]
}

Мої package.jsonзалежності розробника

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "mocha": "^5.2.0",
}

2

Я вирішив цю проблему сьогодні вранці, дотримуючись таких інструкцій

Встановіть модулі NPM

npm install --save-dev @babel/polyfill
npm install --save-dev @babel/register

package.json :

"scripts": {
    "test": "mocha --require @babel/register --require @babel/polyfill src/DesktopApplication/Tests",
  }

.babelrc

{
  "presets": ["@babel/env"]
}

1

Я вирішив цю проблему сьогодні вранці, дотримуючись наведених нижче інструкцій від офіційних інструкцій щодо використання Babel для Mocha 4:

Встановіть модулі NPM

npm install --save-dev babel-polyfill
npm install --save-dev babel-preset-env
npm install --save-dev babel-register

або одна команда:

npm i -d babel-polyfill babel-preset-env babel-register

package.json :

"scripts": {
    "test": "mocha --require babel-polyfill --require babel-register"
  }

.babelrc

{
  "presets": ["env"]
}


0

Я встановив mochaта зустрічав точно таку ж помилку, коли використовую importу своєму коді. Виконавши наступні дії, проблему було виправлено.

npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev

А потім додайте .babelrcфайл:

{
    "presets": [
        "es2015"
    ]
}

А потім запустіть mochaтаким чином:

mocha --compilers js:babel-core/register

-1

У мене була та сама проблема. Під час запуску тестів я зрозумів, що насправді хочу заглушити залежні модулі. Це добре для модульного тестування та запобігає перетворенню підмодулів. Тому я використовував proxyquire, а саме:

const proxyquire = require('proxyquire').noCallThru()

const myTestedModule = proxyquire('../myTestedModule', {
    'dependentModule1': { //stubbed module1 },
    'dependentModule2': { //stubbed module2 }
})

Це краще підходить як коментар.
Гаджус

-3

для подальшого налаштування перевірки

npm install babel-preset-latest --save-dev

та в .babelrc

{
  "presets": [ "latest" ]
}

на відміну від ...

npm install babel-preset-es2015 --save-dev

і

{
 "presets": [ "es2015" ]
}

2
Я думаю, ця відповідь практично не пов'язана з цим питанням .. точніше, її можна додати як коментар до іншої відповіді
62mkv

@ 62mkv Дякую! Спосіб бути яструбом і підтримувати це місце в чистоті.
Phil Henry Mcboob
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.