web-dev-qa-db-de.com

Unerwarteter Tabel-Import beim Ausführen von Moccatests

Die Lösungen, die in anderen verwandten Fragen angeboten werden, z. B. das Einfügen der entsprechenden Voreinstellungen (es2015) in .babelrc, sind bereits in meinem Projekt implementiert.

Ich habe zwei Projekte (nennen wir sie A und B), die beide die ES6-Modulsyntax verwenden. In Projekt A importiere ich Projekt B, das über npm installiert wird und im Ordner node_modules liegt. Wenn ich meine Testsuite für Project A ausführen, erhalte ich die Fehlermeldung: 

SyntaxError: Unerwarteter Tokenimport

Dieser angeblich fehlerhafte Codezeile aus Projekt B geht voraus:

(Funktion (Export, Anforderung, Modul, Dateiname, Verzeichnisname) {import createBrowserHistory aus 'history/lib/createBrowserHistory';

Das Leben scheint etwas mit npm zu sein oder möglicherweise mit Babel in Verbindung zu stehen, da meine Quelldatei nur enthält: "import createBrowserHistory aus 'history/lib/createBrowserHistory"; Projekt A, meine Testsuite (die weiterhin Es6-Importe für interne Projektmodule verwendet) funktioniert einwandfrei.

Full Stack Trace:

 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

Hier ist mein Testbefehl von package.json:

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

Dieser StackOverflow-Post ist ähnlich, bietet jedoch keine Lösung für meine Verwendung der Befehlszeile: Importieren eines Moduls aus node_modules mit babel, aber fehlgeschlagen

72
ThinkingInBits

Es scheint, dass die einzige Lösung darin besteht, explizit Folgendes aufzunehmen: 

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

in einer Testhilfedatei, und übergeben Sie das in meinem Testbefehl an Mocha:

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

Das finale Resultat:

Fügen Sie registerBabel.js hinzu: eine separate Datei, deren Aufgabe darin besteht, babel-core/register zu erfordern ...

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

Fügen Sie ein entry.js hinzu, wenn Ihre Anwendung auch auf den Babel-Knoten angewiesen ist. Dies fungiert als Wrapper für Ihre es6-Anwendung.

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

Sie würden dann Ihre Anwendung mit node entry ausführen.

Für Mocha-Tests sollte testHelper.js auch registerBabel.js erfordern, um die Unterstützung von Babel zur Laufzeit zu initialisieren.

require('./registerBabel');

Und mache deine Mokkatests mit mocha --require ./testHelper.js '+(test)/**/*Spec.js'

Dadurch wird jede Datei, die auf "Spec.js" endet, innerhalb von "./test" rekursiv getestet. Ersetzen Sie das Muster durch ein Muster, das den Spezifikationen in Ihrem Projekt entspricht.

45
ThinkingInBits

Für Babel <6

Der einfachste Weg, dieses Problem zu lösen, ist:

  1. npm install babel-preset-es2015 --save-dev
  2. Fügen Sie .babelrc mit dem Inhalt zum Stamm des Projekts hinzu:

    {
     "presets": [ "es2015" ]
    }
    

Stellen Sie sicher, dass Sie Mocha mit dem Parameter "--compilers js: babel-core/register" ausführen.

Für Babel6/7 +

  1. npm install @babel/preset-env --save-dev
  2. Fügen Sie .babelrc mit dem Inhalt zum Stamm des Projekts hinzu:

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

Stellen Sie sicher, dass Sie Mokka mit dem Parameter --compilers js:babel-register (Babel 6) oder --compilers js:@babel/register (Babel 7) ausführen

65
deepelement

Sicher, Sie werden dieses Problem haben, Sie verwenden ES6, das der Mokka nicht kennt

Sie verwenden also Babel, aber Sie verwenden es nicht in Ihrem Test ...

Wenige Lösungen: 

A. wenn Sie mit NPM laufen 

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

B. ich verwende 

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

C. Von cli:

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

Weitere Informationen finden Sie unter http://www.pauleveritt.org/articles/pylyglot/es6_imports/

26
Ofir Attal

Ich bin auf das gleiche Thema gestoßen. Ich habe jede andere Lösung auf stackoverflow und darüber hinaus ausprobiert und diese einfache Konfiguration in package.json hinzugefügt:

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

Alle meine ES6-Importe funktionierten danach .. .. Übrigens hatte ich dieselbe Konfiguration in webpack.config.js, aber anscheinend war dies die einzige Möglichkeit, diese Funktion auch für Mocha-Tests zu nutzen.

Hoffe das hilft jemandem.

23
arakno

Ich hatte {"modules": false} in meiner .babelrc-Datei, wie folgt: 

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

was warf 

Unerwarteter Token-Import

Sobald ich es entfernte, lief Mokka erfolgreich.

14
JoeTidee

Ich hatte das gleiche Problem und korrigierte es durch Lesen aus der babel-Dokumentation für die Integration von Babel mit Mocha: 

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

Für jeden, der Babel 7 und Mocha 4 verwendet, haben sich einige Paketnamen etwas geändert und die akzeptierte Antwort ist etwas veraltet. Was ich tun musste, war:

npm install @babel/register --saveDev

und Hinzufügen von --require @babel/register zur Testzeile in package.json

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

Der @babel/polyfill behebt einige Dinge wie die async/await-Funktionalität, falls Sie diese verwenden.

Hoffe das hilft jemandem :)

3
syazdani

Der einfachste Weg mit babel 6.X.X war die Verwendung von nyc und das Hinzufügen einer helper-Datei in den pckage.json

Also hier ist was ich verwendet habe

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')();

Jetzt können Sie es6 in Ihren Tests oder an jedem beliebigen Ort einsetzen. Meine versagen alle;)

Dann npm run test, der nyc mocha --reporter tap 'test/**/*.spec.js' abfeuert

2
Jamie Hutber

--compilers ist veraltet.

Meine einfache Lösung: 

npm install --save-dev babel-core

Und in der package.json fügen Sie Ihr Testskript wie folgt hinzu:

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

Hier ist was für mich gearbeitet hat. Ich habe eine Warnung erhalten, wenn Sie das --compilers-Flag verwenden.

DeprecationWarning: "--compilers" wird in einer zukünftigen Version entfernt von Mocha; Siehe https://git.io/vdcSr für weitere Informationen

Ich habe es deshalb durch das --require-Flag ersetzt

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

Hier ist mein .babelrc:

{
  "presets": ["env"]
}

Meine package.json dev-Abhängigkeiten

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

Sie müssen möglicherweise geben Sie die Option extensions an

require("@babel/register")({
  extensions: ['.jsx', '.js', '.ts', '.tsx']
})
1
mindeavor

Ich füge hier eine weitere ES6 + Mokka + Babel-Konfigurationsantwort hinzu, Stand Juni '19 (siehe Datum der Antwort/des Kommentars). Mocha hat das Flag --compiler verworfen, und die Version, die ich verwende, ist auch mit dem Flag --no-deprecation nicht verfügbar, vgl. this

Beachten Sie, dass ich nicht alle relevanten Teile der verlinkten Seiten einbinden werde, da mich keiner von ihnen zu einem sauberen Test-Build gebracht hat, der auf den neuesten Versionen von Mocha und Babel basiert. Diese Antwort sollte die Schritte enthalten, die mich zu einem erfolgreichen Testaufbau führten.

Befolgen Sie die Anweisungen hier und in diese Antwort und hier , und versuchen Sie, mit npm install das zu installieren, was als das neueste Mindestbabel erscheint:

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

Und ich habe den Mokka-Aufruf in package.json folgendermaßen angepasst:

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

Dies führte zu Fehlern:

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

Wie oben hat --no-deprecation nicht geholfen, bitte verweisen Sie auf die oben verlinkte Seite. Also folge den Anweisungen von hier Ich habe package.json angepasst:

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

Es wurden Fehler beim Auffinden von babel-Modulen festgestellt, z. B .:

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

Zu diesem Zeitpunkt begann ich mit der Installation von Babel-Paketen, bis ich fortfahren konnte. Ich glaube, dass die vollständige Installation ungefähr so ​​aussieht:

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

Die letzte erforderliche Änderung bestand darin, den Mokka-Aufruf in package.json zu aktualisieren und das js: -Präfix wie folgt zu entfernen:

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

Ich kann nicht antworten, warum dies notwendig war: Wenn jemand dies beantworten kann, hinterlasse bitte einen Kommentar und ich werde meine Antwort mit besseren Informationen aktualisieren.

Das letzte was ich gemacht habe war ein .babelrc im Projektverzeichnis zu erstellen, mit dem Inhalt:

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

Ich kann mich nicht erinnern, was dies veranlasst hat, aber ich glaube , dass es daran lag, dass Mokka sich weiterhin darüber beschwerte, dass ich das import - Schlüsselwort in meinem nicht erkannt habe test.js. Wie oben, wenn jemand darauf antworten kann, hinterlasse bitte einen Kommentar und ich werde meine Antwort mit besseren Informationen aktualisieren.

0
pb2q

Ich habe mocha installiert und den gleichen Fehler festgestellt, wenn ich import im Code verwende. Durch die folgenden Aktionen wurde das Problem behoben.

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

Fügen Sie dann eine .babelrc-Datei hinzu:

{
    "presets": [
        "es2015"
    ]
}

Führen Sie dann mocha folgendermaßen aus:

mocha --compilers js:babel-core/register
0
Jeff Tian

Ich habe dieses Problem heute Morgen mit den folgenden Anweisungen der offiziellen Using Babel-Anweisungen für Mocha 4 gelöst: 

NPM-Module installieren

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

oder ein einzelner Befehl:

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
Doug Wilhelm

Ich habe dieses Problem heute morgen mit den folgenden Anweisungen gelöst 

NPM-Module installieren

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"]
}
0
Andrey Tagaew