Importación de token inesperada de Babel al ejecutar pruebas mocha


92

Las soluciones ofrecidas en otras preguntas relacionadas, como incluir los presets adecuados (es2015) en .babelrc, ya están implementadas en mi proyecto.

Tengo dos proyectos (llamémoslos A y B) que usan la sintaxis del módulo ES6. En el Proyecto A, estoy importando el Proyecto B que se instala a través de npm y vive en la carpeta node_modules. Cuando ejecuto mi conjunto de pruebas para el Proyecto A, aparece el error:

SyntaxError: Importación de token inesperada

Que está precedido por esta supuesta línea errónea de código del Proyecto B:

(función (exporta, requiere, módulo, __filename, __dirname) {import createBrowserHistory from 'history / lib / createBrowserHistory';

El iife parece ser algo relacionado con npm o posiblemente babel, ya que mi archivo fuente solo contiene "import createBrowserHistory from 'history / lib / createBrowserHistory'; Las pruebas unitarias en el conjunto de pruebas del Proyecto B funcionan bien, y si elimino el Proyecto B como una dependencia de El proyecto A, mi conjunto de pruebas entonces (todavía usando importaciones de es6 para módulos de proyectos internos) funciona bien.

Seguimiento de pila completa:

 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

Aquí está mi comando de prueba de package.json:

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

Esta publicación de StackOverflow es similar pero no ofrece una solución para mi uso de la línea de comando: importar un módulo de node_modules con babel pero falló


1
Si está distribuyendo un módulo en npm, solo debería distribuir la versión transpilada de ese módulo.
loganfsmyth

Este proyecto es muy ligero. Está destinado principalmente para mi propio uso, o para otros si tienen un proceso de transpiración implementado que pueda respaldarlo. Estoy tratando de lograr "vanilla es6" en estas dependencias.
ThinkingInBits

2
Creo que te olvidas de configurar el babel en package.json. agréguelos a su package.json "babel": {"presets": ["es2015"]}
Jacob

3
Nota: de acuerdo con la documentación --compilers no es necesario, --require babel-registerdebe usarse en su lugar: "Si sus módulos ES6 tienen extensión .js, puede instalar npm --save-dev babel-register y usar mocha --require babel-register; --compilers sólo es necesario si necesita especificar una extensión de archivo ".
intenta atrapar finalmente

1
Finalmente pude hacer que esto funcionara "babel":{"presets": ["es2015"]}, ¡era lo último que me faltaba!
Brandon

Respuestas:


79

Para Babel <6

La forma más sencilla de solucionar este problema es:

  1. npm install babel-preset-es2015 --save-dev
  2. Agregue .babelrca la raíz del proyecto con contenido:

    {
     "presets": [ "es2015" ]
    }

Asegúrese de que está ejecutando mocha con el parámetro "--compilers js: babel-core / register".

Para Babel6 / 7 +

  1. npm install @babel/preset-env --save-dev
  2. Agregue .babelrca la raíz del proyecto con contenido:

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

Asegúrese de que está ejecutando mocha con el parámetro --compilers js:babel-register(Babel 6) o --compilers js:@babel/register(Babel 7)

Para mocha versión 7 o posterior, use --require babel-registero --require @babel/registerrespectivamente.


27
intente ejecutar mocha con --require babel-register param
kolec

2
@kolec Esto funciona. Aún mejor, cree un mocha.optsarchivo en la raíz del directorio / test y agréguelo allí
Martin Dawson

3
Todo esto junto todavía no ayuda (línea de comandos, no mocha.opts).
Kev

3
Si desea usar es2016, tenga en cuenta que es2016 en Babel "Solo compila lo que está en ES2016 a ES2015", por lo que necesita tanto es2016 como es2015 en su matriz de preajustes
prauchfuss

4
--compilersahora está en desuso. Úselo en su --requirelugar.
robsch

46

Parece que la única solución es incluir explícitamente:

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

en un archivo auxiliar de prueba, y páselo a mocha en mi comando de prueba:

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

La solución definitiva:

Agregue registerBabel.js : un archivo separado cuyo trabajo es requerir babel-core / register ...

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

Agregue un entry.js si su aplicación también se basa en babel-node. Esto actúa como un contenedor para su aplicación que contiene es6.

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

A continuación, ejecutaría su aplicación con node entry

Para las pruebas de mocha, testHelper.js también debe requerir registerBabel.js para inicializar el soporte de babel en tiempo de ejecución.

require('./registerBabel');

Y ejecuta tus pruebas de moca con mocha --require ./testHelper.js '+(test)/**/*Spec.js'

Esto probará de forma recursiva cualquier archivo que termine en "Spec.js" dentro de "./test". Sustituya el patrón por uno que coincida con las especificaciones de su proyecto.


3
Parece que la ignoreexpresión regular está un poco apagada. Tuve que agregar una barra invertida de escape justo después de node_modules: ignore: /node_modules\/(?!ProjectB)/para que el archivo babelRegister funcione. ¡De lo contrario parece genial!
hellatan

Esto no nos permite usar Rollupify debido a las declaraciones requeridas. ¿Conocería una forma de hacer esto sin usar las declaraciones require?
MikesBarto2002

Esto es genial, pero ¿qué pasa con las herramientas que no permiten agregar código como este y quieren ejecutar sus archivos directamente? Entonces terminas con babel-nodelo que no permite tal uso .babelrc.
Evgeny

1
¡eres increible! Babel estaba procesando mi código ES6 cuando solo ejecutaba el servidor, pero la prueba de mocha fallaba. Tu respuesta lo resolvió. Intenté --compilers en mocha.opts pero eso hizo que fallaran las declaraciones de importación.
Píxeles energéticos

1
No pude hacer que esto funcionara, pero resultó que también necesitaba extender mi babelrc: `` `require ('@ babel / register') ({extensions: './.babelrc', ignore: [/ node_modules \ / (?! ProyectoB) /]}); ``
TiggerToo

26

Bueno, seguro que tendrás ese problema, estás usando ES6 que Mocha no sabe

Entonces estás usando babel pero no lo usas en tu prueba ...

Pocas soluciones:

A. si utiliza NPM

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

B. estoy usando

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

C. De cli:

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

Puede leer más en http://www.pauleveritt.org/articles/pylyglot/es6_imports/


1
¡Muchas gracias! Me faltaba la opción --compilers js: babel-core / register
mycargus

1
Ya estaba haciendo esto ... ¿Leíste la pregunta inicial?
ThinkingInBits

1
@ThinkingInBits ¿Qué terminaste usando, cómo resolviste (si lo hiciste) el problema? Estoy teniendo serios problemas aquí, probé la mayoría de estas opciones
Milán Velebit

--compilersestá en desuso ahora, parece que --requirees la única opción segura para ir
Ali Ghanavatian

23

Me encontré con el mismo problema. Después de haber probado todas las demás soluciones en stackoverflow y más allá, agregar esta configuración simple en package.json lo hizo por mí:

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

Todas mis importaciones de ES6 funcionaron después de eso. Por cierto, tenía esta misma configuración dentro de webpack.config.js, pero aparentemente esta era la única forma de hacerlo funcionar también para las pruebas de mocha.

Espero que esto ayude a alguien.


Tenía un archivo .babelrc escrito incorrectamente, por lo que inicialmente no funcionaba. Esta solución funciona y es la solución recomendada. Cree un archivo .babelrc en su proyecto y agregue {"presets": ["es2015"]}
AfDev

14

Tenía {"modules": false}en mi archivo .babelrc, así:

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

que estaba tirando

Importación de token inesperada

Una vez que lo eliminé, mocha se ejecutó correctamente.


Esto fue generado por Webpacker para Rails: `` `" presets ": [[" env ", {" modules ": false," targets ": {" browsers ":"> 1% "," uglify ": ​​true}, "useBuiltIns": true}], "react" `` `Una vez que eliminé la línea de módulos, funcionó para mí.
emptywalls

Esto resolvió mi problema cuando CircleCI no podía ejecutar mis pruebas unitarias de broma y me daba el error inesperado de importación de tokens. +1!
Candlejack

Esto lo hizo por mí. Rails, Webpacker, etc ... ¡Gracias!
emptywalls

8

Tuve el mismo problema y lo solucioné leyendo la documentación de babel para integrar Babel con Mocha:

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

¿Para qué versión de Mocha y Babel?
Ognyan Dimitrov

Mis versiones de Babel son 6.26.0excepto "babel-preset-env": "1.6.0"y "mocha": "3.5.3"
bhantol

Extraño. Esto resolvió mi problema y fue un problema puro de leer el documento en mi caso.
Ognyan Dimitrov

6

Para cualquiera que use Babel 7 y Mocha 4, algunos de los nombres de los paquetes han cambiado un poco y la respuesta aceptada está un poco desactualizada. Lo que tenía que hacer era:

npm install @babel/register --saveDev

y agregando --require @babel/registera la línea de prueba enpackage.json

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

La @babel/polyfillsolución corrige algunas cosas como la funcionalidad async / await si las está utilizando.

Espero que ayude a alguien :)


3

--compilers es obsoleto.

Mi sencilla solución:

npm install --save-dev babel-core

Y en package.json agregue su script de prueba como este:

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

3

Estoy agregando otra respuesta de configuración de ES6 + mocha + babel aquí, vigente a partir de junio de 2019 (consulte las fechas en la respuesta / comentario). mocha ha desaprobado la --compilerbandera, y la versión que estoy usando no está disponible incluso con la --no-deprecationbandera, consulte esto

Tenga en cuenta que no incluiré todos los bits relevantes de las páginas vinculadas, porque ninguno de ellos me llevó a una compilación de prueba limpia basada en las últimas versiones de mocha y babel; esta respuesta debe incluir los pasos que me llevaron a una compilación de prueba exitosa.

Siguiendo las instrucciones aquí, y en esta respuesta , y aquí , intenté instalar lo que parecía ser el último babel mínimo usando npm install:

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

Y ajusté la invocación de mocha en package.json, así:

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

Esto llevó a errores:

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

Como se indicó anteriormente, --no-deprecationno ayudó, consulte la página vinculada anteriormente. Entonces, siguiendo las instrucciones de aquí , ajusté package.json:

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

Y comencé a ver errores sobre la ubicación de módulos de babel, como:

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

En este punto, comencé a instalar paquetes de babel hasta que pude progresar. Creo que la instalación completa es algo como:

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

El último cambio requerido fue actualizar la invocación de mocha en package.json, eliminando el js:prefijo, así:

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

No puedo responder por qué esto era necesario: si alguien puede responder esto, deje un comentario y actualizaré mi respuesta con mejor información.

Lo último que hice fue crear un .babelrc en el directorio del proyecto, con el contenido:

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

No puedo recordar qué provocó esto, pero creo que fue porque mocha continuó quejándose de no reconocer la importpalabra clave en mi test.js. Como se indicó anteriormente, si alguien puede responder esto, deje un comentario y actualizaré mi respuesta con mejor información.


En este punto, puedo ejecutar mis pruebas de moca con éxito. Me doy cuenta de que hay lagunas en mi conocimiento aquí: he escrito una gran cantidad de código javascript de producción, pero soy un novato de nodo relativo. Cualquiera que vea esto con más para agregar a la respuesta, deje un comentario y mejoraré la respuesta, O deje su propia respuesta mejor.
pb2q

2

Encontré que la forma más fácil de hacerlo con babel 6.XX era usar nyc y luego agregar un helperarchivo en elpckage.json

Así que esto es lo que usé

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

Ahora podrá utilizar es6 en sus pruebas o donde lo necesite. Todos los míos están fallando;)

Entonces npm run testque dispararányc mocha --reporter tap 'test/**/*.spec.js'


2

Esto es lo que funcionó para mí. Recibí una advertencia al usar la --compilersbandera.

DeprecationWarning: "--compilers" se eliminará en una versión futura de Mocha; consulte https://git.io/vdcSr para obtener más información

Por lo tanto, lo reemplacé con la --requirebandera

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

Aquí está mi .babelrc:

{
  "presets": ["env"]
}

Mis package.jsondependencias de desarrollo

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

2

Resolví este problema esta mañana con las siguientes instrucciones

Instalar módulos 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

Resolví este problema esta mañana con las siguientes instrucciones de las instrucciones oficiales de Uso de Babel para Mocha 4:

Instalar módulos NPM

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

o un solo comando:

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

Instalé mochay encontré exactamente el mismo error cuando lo uso importen mi código. Al realizar las siguientes acciones, se solucionó el problema.

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

Y luego agrega un .babelrcarchivo:

{
    "presets": [
        "es2015"
    ]
}

Y luego ejecuta mochade esta manera:

mocha --compilers js:babel-core/register

-1

Yo tuve el mismo problema. Al ejecutar las pruebas, me di cuenta de que en realidad quería stub de módulos dependientes. Es bueno para pruebas unitarias y evita que babel transforme submódulos. Entonces usé proxyquire, a saber:

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

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

Esto encaja mejor como comentario.
Gajus

-3

para una configuración más preparada para el futuro

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

y en .babelrc

{
  "presets": [ "latest" ]
}

Opuesto a...

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

y

{
 "presets": [ "es2015" ]
}

2
Supongo que esta respuesta prácticamente no está relacionada con esta pregunta ... o más bien, podría agregarse como comentario a otra respuesta
62mkv

@ 62mkv ¡Gracias! Manera de ser un halcón y mantener este lugar limpio.
Phil Henry Mcboob
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.