Importação de token inesperada do Babel ao executar testes de mocha


92

As soluções oferecidas em outras questões relacionadas, como incluir as predefinições adequadas (es2015) em .babelrc, já estão implementadas em meu projeto.

Tenho dois projetos (vamos chamá-los de A e B) que usam a sintaxe do módulo ES6. No Projeto A, estou importando o Projeto B, que é instalado via npm e reside na pasta node_modules. Quando executo meu conjunto de testes para o Projeto A, recebo o erro:

SyntaxError: Importação de token inesperada

Que é precedido por esta suposta linha de código incorreta do Projeto B:

(função (exporta, requer, módulo, __filename, __dirname) {import createBrowserHistory de 'history / lib / createBrowserHistory';

O iife parece ser algo npm ou possivelmente relacionado ao babel, pois meu arquivo de origem contém apenas "import createBrowserHistory from 'history / lib / createBrowserHistory'; Os testes de unidade no conjunto de testes do Projeto B funcionam bem, e se eu remover o Projeto B como uma dependência de O Projeto A, meu conjunto de testes (ainda usando importações es6 para módulos de projeto internos) funciona muito bem.

Rastreamento de pilha 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

Aqui está meu comando de teste do package.json:

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

Esta postagem StackOverflow é semelhante, mas não oferece uma solução para o meu uso da linha de comando: importar um módulo de node_modules com babel, mas falhou


1
Se você estiver distribuindo um módulo no npm, deverá distribuir apenas a versão transpilada desse módulo.
loganfsmyth

Este projeto é muito leve. Destina-se principalmente para meu próprio uso, ou outros, se tiverem um processo de transpiração em vigor que possa apoiá-lo. Estou tentando obter "vanilla es6" nessas dependências.
ThinkingInBits de

2
Acho que você esqueceu de configurar o babel no package.json. adicione-os ao seu package.json "babel": {"presets": ["es2015"]}
Jacob

3
Nota: de acordo com a documentação --compilers não é necessário, --require babel-registerdeve ser usado em seu lugar: "Se seus módulos ES6 tiverem extensão .js, você pode npm instalar --save-dev babel-register e usar mocha --require babel-register; --compilers só é necessário se você precisar especificar uma extensão de arquivo. "
tente pegar, finalmente

1
Finalmente consegui fazer isso funcionar, "babel":{"presets": ["es2015"]}pois era a última coisa que estava faltando!
Brandon,

Respostas:


79

Para Babel <6

A maneira mais fácil de resolver esse problema é:

  1. npm install babel-preset-es2015 --save-dev
  2. Adicione .babelrcà raiz do projeto com o conteúdo:

    {
     "presets": [ "es2015" ]
    }
    

Certifique-se de que está executando o mocha com o parâmetro "--compilers js: babel-core / register".

Para Babel6 / 7 +

  1. npm install @babel/preset-env --save-dev
  2. Adicione .babelrcà raiz do projeto com o conteúdo:

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

Certifique-se de que está executando o mocha com o parâmetro --compilers js:babel-register(Babel 6) ou --compilers js:@babel/register(Babel 7)

Para mocha versão 7 ou posterior, use --require babel-registerou --require @babel/registerrespectivamente.


27
tente executar o mocha com --require babel-register param
kolec

2
@kolec Isso funciona. Ainda melhor, crie um mocha.optsarquivo na raiz do diretório / test e adicione-o lá
Martin Dawson

3
Tudo isso junto ainda não ajuda (linha de comando, não mocha.opts).
Kev

3
Se você quiser usar es2016, tenha em mente que es2016 em Babel "Só compila o que está em ES2016 para ES2015", então você precisa tanto es2016 e es2015 em sua matriz presets
prauchfuss

4
--compilersagora está obsoleto. Use em seu --requirelugar.
roubo de

45

Parece que a única solução é incluir explicitamente:

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

em um arquivo auxiliar de teste e passe para mocha no meu comando de teste:

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

A solução final:

Adicionar registerBabel.js : um arquivo separado cuja tarefa é exigir babel-core / register ...

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

Adicione um entry.js se seu aplicativo também depender de babel-node. Isso atua como um invólucro para o aplicativo que contém o es6.

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

Você então executaria seu aplicativo com node entry

Para teste de mocha, testHelper.js deve exigir registerBabel.js para inicializar o suporte a babel em tempo de execução.

require('./registerBabel');

E execute seus testes de mocha com mocha --require ./testHelper.js '+(test)/**/*Spec.js'

Isso testará recursivamente qualquer arquivo terminado em "Spec.js" dentro de "./test". Substitua o padrão por um que corresponda às especificações do seu projeto.


3
Parece que a ignoreregex está um pouco errada. Tive que adicionar uma barra invertida de escape logo após node_modules: ignore: /node_modules\/(?!ProjectB)/para que o arquivo babelRegister funcione. Caso contrário, parece ótimo!
hellatan

Isso não nos permite usar Rollupify por causa das instruções de require. Você saberia uma maneira de fazer isso sem usar as instruções require?
MikesBarto2002 de

Isso é ótimo, mas e as ferramentas que não permitem adicionar código como este e querem executar seus arquivos diretamente. Aí você acaba com o babel-nodeque não permite tal coisa usar .babelrc.
Evgeny

1
você é incrivel! Babel estava processando meu código ES6 quando apenas rodava o servidor, mas o teste do mocha iria falhar. Sua resposta resolveu. Tentei --compilers em mocha.opts, mas isso causou a falha nas instruções de importação.
Energetic Pixels de

1
Não consegui fazer isso funcionar, mas descobri que também precisava estender meu babelrc: `` `require ('@ babel / register') ({extends: './.babelrc', ignore: [/ node_modules \ / (?! ProjetoB) /]}); `` `
TiggerToo

26

Bem, com certeza você terá esse problema, você está usando ES6 que o mocha não conhece

Então você está usando o babel mas não o usa no seu teste ...

Poucas soluções:

A. se você estiver executando com NPM, use

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

B. estou usando

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

C. De cli:

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

Você pode ler mais em http://www.pauleveritt.org/articles/pylyglot/es6_imports/


1
muito obrigado! Eu estava perdendo a opção --compilers js: babel-core / register
mycargus

1
Eu já estava fazendo isso ... você ao menos leu a pergunta inicial?
ThinkingInBits de

1
@ThinkingInBits O que você acabou usando, como você (se usou) resolveu o problema? Estou tendo sérios problemas aqui, tentei a maioria dessas opções
Milan Velebit

--compilersestá obsoleto agora, parece que --requireé a única opção segura para ir
Ali Ghanavatian

23

Eu corri para o mesmo problema. Tendo tentado todas as outras soluções em stackoverflow e além, adicionar esta configuração simples em package.json fez isso por mim:

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

Todas as minhas importações ES6 funcionaram depois disso. A propósito, eu tinha essa mesma configuração dentro do webpack.config.js, mas aparentemente essa era a única maneira de fazê-la funcionar para o teste de mocha também.

Espero que isso ajude alguém.


Eu tinha um arquivo .babelrc escrito incorretamente, então ele não estava funcionando inicialmente. Esta solução funciona e é a solução recomendada. Crie um arquivo .babelrc em seu projeto e adicione {"presets": ["es2015"]}
AfDev

14

Eu tinha {"modules": false}em meu arquivo .babelrc, assim:

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

que estava jogando

Importação de token inesperada

Depois de removê-lo, o mocha foi executado com sucesso.


Isso foi gerado pelo Webpacker para Rails: `` `" presets ": [[" env ", {" modules ": false," targets ": {" browsers ":"> 1% "," uglify ": ​​true}, "useBuiltIns": true}], "react" `` `Depois de remover a linha de módulos, funcionou para mim.
emptywalls de

Isso resolveu meu problema quando o CircleCI não conseguia executar meus testes de unidade de brincadeira e me deu o erro inesperado de importação de token. +1!
Candlejack de

Isso fez isso por mim. Rails, Webpacker, etc ... Obrigado!
emptywalls

8

Eu tive o mesmo problema e resolvi lendo a documentação do babel para integrar o Babel com o Mocha:

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

Para qual versão de Mocha e Babel?
Ognyan Dimitrov

Minhas versões do Babel são 6.26.0exceto "babel-preset-env": "1.6.0"e "mocha": "3.5.3"
bhantol

Estranho. Isso resolveu meu problema e, no meu caso, era apenas uma questão de ler o documento.
Ognyan Dimitrov

6

Para qualquer pessoa que use o Babel 7 e o Mocha 4, alguns dos nomes dos pacotes mudaram um pouco e a resposta aceita está um pouco desatualizada. O que eu tive que fazer foi:

npm install @babel/register --saveDev

e adicionando --require @babel/registerà linha de teste empackage.json

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

O @babel/polyfillcorrige algumas coisas como funcionalidade assíncrona / espera, caso você as use.

Espero que ajude alguém :)


3

--compilers está obsoleto.

Minha solução simples:

npm install --save-dev babel-core

E no package.json adicione seu script de teste assim:

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

3

Estou adicionando outra resposta de configuração ES6 + mocha + babel aqui, atual em junho de 19 (consulte as datas em answer / commente). mocha desaprovou o --compilersinalizador, e a versão que estou usando está indisponível mesmo com o --no-deprecationsinalizador, cf isso

Observe que não vou incluir todos os bits relevantes das páginas vinculadas, porque nenhum deles me levou a um teste de compilação limpo com base nas versões mais recentes do mocha e do babel; essa resposta deve incluir as etapas que me levaram a uma compilação de teste bem-sucedida.

Seguindo as instruções aqui, e nesta resposta , e aqui , tentei instalar o que parecia ser o babel mínimo mais recente usando npm install:

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

E eu ajustei a invocação do mocha em package.json, assim:

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

Isso levou a erros:

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

Como acima, --no-deprecationnão ajudou, consulte o link da página acima. Então, seguindo as instruções daqui , ajustei o package.json:

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

E comecei a ver erros sobre a localização de módulos do babel, como:

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

Neste ponto, comecei a instalar os pacotes do babel até poder progredir. Acredito que a instalação completa seja algo como:

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

A última mudança necessária foi atualizar a invocação mocha em package.json, removendo o js:prefixo, assim:

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

Não posso responder porque foi necessário: se alguém puder responder por favor deixe um comentário e atualizarei minha resposta com melhores informações.

A última coisa que fiz foi criar um .babelrc no diretório do projeto, com o conteúdo:

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

Não me lembro o que causou isso, mas acredito que foi porque mocha continuou a reclamar de não reconhecer a importpalavra - chave em meu test.js. Como acima, se alguém puder responder, deixe um comentário e atualizarei minha resposta com melhores informações.


Neste ponto, posso executar meus testes de mocha com sucesso. Percebo que existem lacunas no meu conhecimento aqui: escrevi muito código javascript de produção, mas sou um novato nodo relativo. Quem vir isso com mais a acrescentar à resposta, por favor deixe um comentário e eu irei melhorar a resposta, OU deixe sua própria resposta melhor.
pb2q de

2

Eu descobri que a maneira mais fácil de fazer com o babel 6.XX era usar o nyc e, em seguida, adicionar um helperarquivo nopckage.json

Então aqui está o que eu usei

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

Agora você poderá usar o es6 em seus testes ou onde precisar. Os meus estão todos falhando;)

Então, npm run testque vai dispararnyc mocha --reporter tap 'test/**/*.spec.js'


2

Aqui está o que funcionou para mim. Recebi um aviso ao usar a --compilersbandeira.

Aviso de descontinuação: "--compilers" será removido em uma versão futura do Mocha; veja https://git.io/vdcSr para mais informações

Portanto, substituí-o pela --requirebandeira

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

Aqui está o meu .babelrc:

{
  "presets": ["env"]
}

Minhas package.jsondependências dev

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

2

Resolvi este problema esta manhã com as seguintes instruções

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

Resolvi esse problema esta manhã com as seguintes instruções das instruções oficiais de Uso do 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

ou um único 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

Eu instalei mochae encontrei exatamente o mesmo erro quando uso importno meu código. Ao fazer as seguintes ações, o problema foi corrigido.

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

Em seguida, adicione um .babelrcarquivo:

{
    "presets": [
        "es2015"
    ]
}

E então execute mochadesta forma:

mocha --compilers js:babel-core/register

-1

Eu tive o mesmo problema. Ao executar os testes, percebi que realmente queria criar stub nos módulos dependentes. É bom para testes de unidade e evita que o babel transforme os submódulos. Então eu usei proxyquire, a saber:

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

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

Isso é mais adequado como um comentário.
Gajus

-3

para uma configuração mais preparada para o futuro

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

e em .babelrc

{
  "presets": [ "latest" ]
}

em oposição a ...

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

e

{
 "presets": [ "es2015" ]
}

2
Acho que essa resposta praticamente não está relacionada a esta pergunta .. ou melhor, ela poderia ser adicionada como um comentário a outra resposta
62mkv

@ 62mkv Obrigado! Que jeito de ser um falcão e manter este lugar limpo.
Phil Henry Mcboob
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.