web-dev-qa-db-ja.com

mochaテストを実行するときのBabelの予期しないトークンのインポート

.babelrcに適切なプリセット（es2015）を含めるなど、他の関連する質問で提供されるソリューションは、すでに私のプロジェクトに実装されています。

ES6モジュール構文を使用する2つのプロジェクト（AおよびBと呼びます）があります。プロジェクトAでは、npm経由でインストールされ、node_modulesフォルダーにあるプロジェクトBをインポートしています。プロジェクトAのテストスイートを実行すると、次のエラーが表示されます。

SyntaxError：予期しないトークンのインポート

これは、プロジェクトBからのこの誤ったコード行が先行しています：

（関数（exports、require、module、__ filename、__ dirname）{import createBrowserHistory from 'history/lib/createBrowserHistory';

私のソースファイルには「history/lib/createBrowserHistoryからimport createBrowserHistory」のみが含まれているため、iifeはnpmまたはおそらくbabel関連のように見えます。プロジェクト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からモジュールをインポートしますが、失敗しました

node.jsnpmsyntax-errormochababeljs
78
ThinkingInBits

唯一の解決策は明示的に含めることであるようです：

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'を使用してmochaテストを実行します

これは、「./ test」内の「Spec.js」で終わるファイルを再帰的にテストします。プロジェクトの仕様に一致するパターンでパターンを置き換えます。

44
ThinkingInBits

バベル<6

この問題を解決する最も簡単な方法は次のとおりです。

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

  2. コンテンツを含むプロジェクトのルートに.babelrcを追加します。

    {
 "presets": [ "es2015" ]
}

「--compilers js：babel-core/register」パラメーターを使用してmochaを実行していることを確認してください。

Babel6/7 +の場合

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

  2. コンテンツを含むプロジェクトのルートに.babelrcを追加します。

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

--compilers js:babel-register（Babel 6）または--compilers js:@babel/register（Babel 7）パラメーターを使用してmochaを実行していることを確認してください

72
deepelement

あなたがその問題を抱えていることは確かです、あなたはモカが知らない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/ で読むことができます。

26
Ofir Attal

同じ問題にぶつかりました。 stackoverflow以降で他のすべてのソリューションを試した後、package.jsonにこの簡単な構成を追加すると、私のためにそれができました：

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

その後、すべてのES6インポートが機能しました。ちなみに、webpack.config.js内で同じ設定をしていましたが、明らかにこれがmochaテストでも機能する唯一の方法でした。

これが誰かを助けることを願っています。

23
arakno

.babelrcファイルに{"modules": false}が含まれていました。

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

投げていた

予期しないトークンのインポート

削除すると、mochaは正常に実行されました。

14
JoeTidee

私は同じ問題を抱えていて、バベルとモカを統合するための babel documentation を読んで修正しました：

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

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を使用すると、async/await機能などが修正されます。

それが誰かを助けることを願っています:)

3
syazdani

Babel 6.X.Xを使用する最も簡単な方法は、nycを使用してからhelperファイルをpckage.jsonに追加することです

ここに私が使用したものがあります

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

これで、テストまたは必要な場所でes6を使用できるようになります。私のすべてが失敗しています;）

その後、npm run testは、nyc mocha --reporter tap 'test/**/*.spec.js'を起動します

2
Jamie Hutber

これが私のために働いたものです。 --compilersフラグを使用すると警告が表示されました。

DeprecationWarning：「--compilers」は、Mochaの将来のバージョンで削除されます。詳細については https://git.io/vdcSr を参照してください

したがって、それを--requireフラグに置き換えました

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

これが私の.babelrcです：

{
  "presets": ["env"]
}

package.json devの依存関係

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

--compilersは非推奨です。

私の簡単な解決策：

npm install --save-dev babel-core

そして、package.jsonに次のようなテストスクリプトを追加します。

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

今朝、この問題を次の手順で解決しました

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
Andrey Tagaew

TypeScriptを使用している場合、 extensionsオプションを指定 が必要になる場合があります。

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

ここに、19年6月現在の別のES6 + mocha + babel configの回答を追加します（answer/commenteの日付を参照）。 mochaは--compilerフラグを廃止しました。使用しているバージョンでは、--no-deprecationフラグを使用することもできません。c.f。 this

リンクされたページのすべての関連ビットを含めるわけではないことに注意してください。これは、最新バージョンのmochaとbabelに基づいたクリーンなテストビルドに到達しなかったためです。この回答には、テストビルドを成功させるための手順が含まれている必要があります。

ここの指示に従い、 この回答 、および ここ で、npm installを使用して、最小の最新バベルと思われるものをインストールしようとしました。

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

そして、package.jsonのmocha呼び出しを次のように調整しました。

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

これによりエラーが発生しました。

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

上記のように、--no-deprecationは役に立ちませんでした。上記のリンク先のページを参照してください。 here の指示に従って、package.jsonを調整しました。

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

そして、次のようなbabelモジュールの配置に関するエラーが表示されるようになりました。

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

この時点で、進行するまでbabelパッケージのインストールを開始しました。フルインストールは次のようなものだと思います：

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

最後に必要な変更は、package.jsonのmocha呼び出しを更新し、js:プレフィックスを削除することでした。

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

なぜこれが必要なのか答えられません。誰かがこれに答えられるなら、コメントを残してください。より良い情報で答えを更新します。

最後にしたことは、プロジェクトディレクトリに.babelrcを作成し、その内容を次のようにしたことです。

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

何がこれを促したのか思い出せませんが、test（js）でimportキーワードを認識しないとmochaが文句を言い続けていたためだと思いますbelieve。上記のように、誰かがこれに答えることができるならば、コメントを残してください、そして、より良い情報で私の答えを更新します。

0
pb2q

mochaをインストールしましたが、コードでimportを使用するとまったく同じエラーが発生しました。以下のアクションを実行することにより、問題は修正されました。

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

そして、.babelrcファイルを追加します。

{
    "presets": [
        "es2015"
    ]
}

そして、このようにmochaを実行します：

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

今朝、この問題をMocha 4の 公式のBabelの使用手順 からの指示で解決しました。

NPMモジュールのインストール

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

または単一のコマンド：

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