web-dev-qa-db-fra.com

Importation inattendue de jetons Babel lors de l'exécution de tests mocha

Les solutions proposées dans d'autres questions connexes, telles que l'inclusion des préconfigurations appropriées (es2015) dans .babelrc, sont déjà implémentées dans mon projet.

J'ai deux projets (appelons-les A et B) qui utilisent tous les deux la syntaxe du module ES6. Dans le projet A, j'importe le projet B, qui est installé via npm et réside dans le dossier node_modules. Lorsque j'exécute ma suite de tests pour le projet A, le message d'erreur suivant s'affiche: 

SyntaxError: Importation de jeton inattendue

Ce qui est précédé de cette prétendue ligne de code erronée du projet B:

(function (exports, require, module, __filename, __dirname) {import createBrowserHistory à partir de 'history/lib/createBrowserHistory';

La vie semble être quelque chose de lié à npm ou probablement babel puisque mon fichier source ne contient que "import createBrowserHistory à partir de" history/lib/createBrowserHistory "; Le projet A, ma suite de tests alors (utilisant toujours les importations es6 pour les modules de projet internes) fonctionne parfaitement.

Trace de pile complète:

 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

Voici ma commande de test de package.json:

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

Cet article de StackOverflow est similaire mais n'offre pas de solution pour mon utilisation de la ligne de commande: importer un module de node_modules avec babel mais échoué

node.jsnpmsyntax-errormochababeljs
72
ThinkingInBits

Il semble que la seule solution consiste à inclure explicitement: 

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

dans un fichier d'aide au test, et transmettez-le à mocha dans ma commande de test:

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

La solution finale:

AjouterregisterBabel.js: un fichier séparé dont le travail est d'exiger babel-core/register ...

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

Ajoutez unentry.jssi votre application s'appuie également sur babel-node. Cela agit comme un wrapper pour votre application contenant es6.

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

Vous exécuteriez ensuite votre application avec node entry

Pour les tests de moka,testHelper.jsdevrait également avoir besoin de registerBabel.js pour initialiser le support Babel au moment de l'exécution.

require('./registerBabel');

Et lancez vos tests moka avec mocha --require ./testHelper.js '+(test)/**/*Spec.js'

Ceci testera récursivement tout fichier se terminant par "Spec.js" dans "./test". Remplacez le motif par un modèle correspondant aux spécifications de votre projet.

45
ThinkingInBits

Pour Babel <6

Le moyen le plus simple de résoudre ce problème est:

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

  2. Ajoutez .babelrc à la racine du projet avec le contenu:

    {
 "presets": [ "es2015" ]
}

Assurez-vous d’exécuter mocha avec le paramètre "--compilers js: babel-core/register".

Pour Babel6/7 +

  1. npm install @babel/preset-env --save-dev

  2. Ajoutez .babelrc à la racine du projet avec le contenu:

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

Assurez-vous que vous utilisez mocha avec le paramètre --compilers js:babel-register (Babel 6) ou --compilers js:@babel/register (Babel 7).

65
deepelement

Bien sûr, vous aurez ce problème, vous utilisez ES6 que le moka ne sait pas

Donc, vous utilisez babel mais vous ne l'utilisez pas dans votre test ...

Peu de solutions: 

A. si vous utilisez NPM, utilisez 

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

B. j'utilise 

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

C. de cli:

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

Vous pouvez en lire plus à http://www.pauleveritt.org/articles/pylyglot/es6_imports/

26
Ofir Attal

J'ai rencontré le même problème. Après avoir essayé toutes les autres solutions sur stackoverflow et au-delà, l'ajout de cette configuration simple sur package.json l'a fait pour moi:

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

Toutes mes importations ES6 ont fonctionné par la suite… .. Au fait, j'avais la même configuration dans webpack.config.js, mais apparemment, c'était le seul moyen de le faire fonctionner également pour les tests de moka.

J'espère que ça aide quelqu'un.

23
arakno

J'ai eu {"modules": false} dans mon fichier .babelrc, comme ceci: 

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

qui jetait 

Importation de jeton inattendue

Une fois que je l'ai enlevé, Mocha a fonctionné avec succès.

14
JoeTidee

J'ai eu le même problème et je l'ai corrigé en lisant la documentation babel pour intégrer Babel à Mocha: 

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

Pour tous ceux qui utilisent Babel 7 et Mocha 4, certains noms de paquets ont légèrement changé et la réponse acceptée est un peu obsolète. Ce que je devais faire était:

npm install @babel/register --saveDev

et en ajoutant --require @babel/register à la ligne de test dans package.json

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

Le @babel/polyfill corrige des problèmes tels que la fonctionnalité async/wait si vous les utilisez.

J'espère que ça aide quelqu'un :)

3
syazdani

J'ai trouvé que le moyen le plus simple de faire avec babel 6.X.X était d'utiliser nyc puis d'ajouter un fichier helper dans le pckage.json

Alors voici ce que j'ai utilisé

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

Vous pourrez maintenant utiliser es6 dans vos tests ou partout où vous en aurez besoin. Les miens échouent tous;)

Puis npm run test qui se déclenchera nyc mocha --reporter tap 'test/**/*.spec.js'

2
Jamie Hutber

--compilers est obsolète.

Ma solution simple: 

npm install --save-dev babel-core

Et dans le package.json ajoutez votre script de test comme ceci:

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

Voici ce qui a fonctionné pour moi. J'ai reçu un avertissement lors de l'utilisation du drapeau --compilers.

DeprecationWarning: "--compilers" sera supprimé dans une version ultérieure de moka; voir https://git.io/vdcSr pour plus d'informations

Je l'ai donc remplacé par le drapeau --require

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

Voici mon .babelrc:

{
  "presets": ["env"]
}

Mes dépendances package.json dev

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

Vous devrez peut-être spécifier l'option extensions si vous utilisez TypeScript:

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

J'ajoute une autre réponse de configuration ES6 + moka + babel ici, en date du 19 juin (se référer aux dates sur réponse/commentaire). mocha a déconseillé le drapeau --compiler, et la version que j'utilise a été indisponible, même avec le drapeau --no-deprecation, c.f. ceci

Notez que je n'inclurai pas tous les éléments pertinents des pages liées, car aucun d'entre eux ne m'a amené à une version de test propre basée sur les dernières versions de mocha et babel; cette réponse devrait inclure les étapes qui m'ont conduit à une construction de test réussie.

En suivant les instructions ici, et dans cette réponse , et ici , j'ai essayé d'installer ce qui semblait être le dernier babel minimum en utilisant npm install:

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

Et j'ai ajusté l'invocation de moka dans package.json, comme ceci:

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

Cela a conduit à des erreurs:

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

Comme ci-dessus, --no-deprecation n'a pas aidé, veuillez faire référence à la page liée ci-dessus. Donc, en suivant les instructions de ici j'ai ajusté package.json:

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

Et commencé à voir des erreurs sur la localisation des modules babel, tels que:

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

À ce stade, j'ai commencé à installer des paquets babel jusqu'à ce que je puisse progresser. Je crois que l'installation complète ressemble à quelque chose comme:

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

La dernière modification requise consistait à mettre à jour l'appel mocha dans package.json, en supprimant le préfixe js:, comme suit:

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

Je ne peux pas dire pourquoi c'était nécessaire: si quelqu'un peut répondre, laissez un commentaire et je mettrai à jour ma réponse avec une meilleure information.

La dernière chose que j'ai faite a été de créer un fichier .babelrc dans le répertoire du projet, avec le contenu suivant:

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

Je ne me souviens pas de ce qui a motivé cela, mais je crois que c’est parce que mocha a continué de se plaindre de ne pas reconnaître le mot clé import dans mon test.js. Comme ci-dessus, si quelqu'un peut répondre à cette question, veuillez laisser un commentaire et je mettrai à jour ma réponse avec une meilleure information.

0
pb2q

J'ai installé mocha et j'ai rencontré exactement la même erreur lorsque j'utilise import dans mon code. En effectuant les actions suivantes, le problème a été résolu.

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

Et ajoutez ensuite un fichier .babelrc:

{
    "presets": [
        "es2015"
    ]
}

Et lancez mocha de cette façon:

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

J'ai résolu ce problème ce matin avec les instructions suivantes fournies par les instructions officielles de Utilisation de Babel pour Mocha 4: 

Installer les modules NPM

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

ou une seule commande:

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

J'ai résolu ce problème ce matin avec les instructions suivantes 

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