[node.js] mocha 테스트를 실행할 때 Babel 예기치 않은 토큰 가져 오기

Question 1

.babelrc에 적절한 사전 설정 (es2015)을 포함하는 것과 같은 다른 관련 질문에서 제공되는 솔루션은 이미 내 프로젝트에 구현되어 있습니다.

ES6 모듈 구문을 사용하는 두 개의 프로젝트 (A와 B라고 부릅니다)가 있습니다. 프로젝트 A에서는 npm을 통해 설치되고 node_modules 폴더에있는 프로젝트 B를 가져옵니다. 프로젝트 A에 대한 테스트 스위트를 실행할 때 오류가 발생합니다.

SyntaxError : 예기치 않은 토큰 가져 오기

프로젝트 B의 잘못된 코드 줄이 앞에 있습니다.

(function (exports, require, module, __filename, __dirname) {import createBrowserHistory from ‘history / lib / createBrowserHistory’;

내 소스 파일에 “import createBrowserHistory from ‘history / lib / createBrowserHistory’만 포함되어 있기 때문에 iife는 npm 또는 바벨과 관련된 것으로 보입니다. 프로젝트 B의 테스트 스위트에서 단위 테스트가 잘 실행되고 프로젝트 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 게시물은 비슷하지만 명령 줄 사용에 대한 솔루션을 제공하지 않습니다.
babel을 사용하여 node_modules에서 모듈을 가져 오지만 실패했습니다.

Question 2

Babel <6 용

이 문제를 해결하는 가장 쉬운 방법은 다음과 같습니다.

npm install babel-preset-es2015 --save-dev
.babelrc컨텐츠와 함께 프로젝트의 루트에 추가하십시오 .
```
{
 "presets": [ "es2015" ]
}
```

“–compilers js : babel-core / register”매개 변수를 사용하여 mocha를 실행하고 있는지 확인하십시오.

Babel6 / 7 + 용

npm install @babel/preset-env --save-dev
.babelrc컨텐츠와 함께 프로젝트의 루트에 추가하십시오 .
```
{
 "presets": [ "@babel/preset-env" ]
}
```

--compilers js:babel-register(Babel 6) 또는 --compilers js:@babel/register(Babel 7) 매개 변수로 mocha를 실행하고 있는지 확인하십시오.

mocha 버전 7 이상의 경우 --require babel-register또는 --require @babel/register각각을 사용하십시오 .

Question 3

유일한 해결책은 다음을 명시 적으로 포함하는 것입니다.

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

테스트 도우미 파일에서 내 테스트 명령의 mocha에 전달합니다.

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

최종 솔루션 :

registerBabel.js 추가 : 작업이 babel-core / register를 요구하는 별도의 파일 …

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

애플리케이션이 babel-node에 의존하는 경우 entry.js를 추가 하십시오. 이것은 애플리케이션이 포함 된 es6의 래퍼 역할을합니다.

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

그런 다음 응용 프로그램을 node entry

mocha 테스트의 경우 testHelper.js 는 런타임에 babel 지원을 초기화하기 위해 registerBabel.js도 필요합니다.

require('./registerBabel');

그리고 모카 테스트를 mocha --require ./testHelper.js '+(test)/**/*Spec.js'

이것은 “./test”내에서 “Spec.js”로 끝나는 모든 파일을 재귀 적으로 테스트합니다. 프로젝트의 사양과 일치하는 패턴으로 대체합니다.

Question 4

확실히 당신은 그 문제가있을 것입니다. 당신은 모카가 모르는 ES6를 사용하고 있습니다.

그래서 바벨을 사용하고 있지만 테스트에서 사용하지 않습니다.

몇 가지 솔루션 :

A. NPM으로 실행하는 경우

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

B. 사용하고 있습니다

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

C. cli에서 :

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

http://www.pauleveritt.org/articles/pylyglot/es6_imports/ 에서 자세한 내용을 읽을 수 있습니다 .

Question 5

나는 같은 문제에 부딪쳤다. stackoverflow 이상에서 다른 모든 솔루션을 시도한 후 package.json 에이 간단한 구성을 추가하면 나를 위해 해냈습니다.

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

그 후 모든 ES6 가져 오기가 작동했습니다. 그건 그렇고, 나는 webpack.config.js 내에 동일한 구성을 가지고 있었지만 분명히 이것이 모카 테스트에서도 작동하도록 만드는 유일한 방법이었습니다.

이것이 누군가를 돕기를 바랍니다.

Question 6

나는했다 {"modules": false}과 같이, 내 .babelrc 파일 :

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

던지고 있던

예기치 않은 토큰 가져 오기

일단 제거하면 모카가 성공적으로 실행되었습니다.

Question 7

나는 같은 문제가 있었고 Babel을 Mocha와 통합하기위한 babel 문서 에서 읽음으로써 수정했습니다 .

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

Question 8

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수정 비동기 / await를 기능과 같은 몇 가지 당신은 그를 사용하는 일이 있다면.

누군가를 돕는 희망 🙂