对于Babel＆lt; 6

Question

其他相关问题中提供的解决方案，例如在.babelrc中包含正确的预设（es2015），已经在我的项目中实现。

我有两个项目（让我们称之为A和B），它们都使用ES6模块语法。在项目A中，我正在导入通过npm安装的项目B，它位于node_modules文件夹中。当我为项目A运行我的测试套件时，我收到错误：

SyntaxError：意外的令牌导入

之前是项目B中所谓的错误代码行：

（function（exports，require，module，__ filename，__ dirname）{import 来自'history / lib / createBrowserHistory'的createBrowserHistory;

因为我的源文件只包含“来自'history / lib / createBrowserHistory'的import createBrowserHistory'，所以iife似乎是npm或者babel相关的东西; Project 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帖子类似，但不提供我使用命令行的解决方案： import a module from node_modules with babel but failed

Answer 1

对于Babel＆lt; 6

解决此问题的最简单方法是：

npm install babel-preset-es2015 --save-dev
将.babelrc添加到项目的根目录中，其内容为：
```
{
 "presets": [ "es2015" ]
}
```

确保使用＆＃34; - 编译器js：babel-core / register＆＃34;运行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

Answer 2

似乎唯一的解决方案是明确包括：

@ECHO off
XCOPY /y /c z:\accounting\daily\test\fdxe*.csv

move fdxe*.csv \\devserver\Elliott_Export\Fedex\test\

rem get date, make it file name friendly
FOR /F "tokens=1-4 delims=/ " %%i in ('date/t') do set d=%%j%%k%%l

rename \\newserver\Export\Fedex\test\?.??? ?????_%d%.???
@Echo on

在测试助手文件中，并在我的测试命令中将其传递给mocha：

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

最终解决方案：

添加 registerBabel.js ：一个单独的文件，其工作是要求babel-core / register ...

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

如果您的应用还依赖于babel-node，请添加 entry.js 。这可以作为包含es6的应用程序的包装器。

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

然后，您将使用require('./registerBabel'); require('./server'); // this file has some es6 imports

运行您的应用程序

对于mocha测试， testHelper.js 也需要registerBabel.js来在运行时初始化babel支持。

node entry

使用require('./registerBabel');

运行您的mocha测试

这将以递归方式测试以＆＃34; Spec.js＆＃34;结尾的任何文件。在＆＃34; ./ test＆＃34;。用符合项目规格的模式替换模式。

Answer 3

确定你会遇到这个问题，你使用的是摩卡不知道的ES6

所以你使用的是babel，但你没有在测试中使用它......

很少解决方案：

一个。如果你使用NPM运行

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

B中。我正在使用

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

℃。来自cli：

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

您可以在http://www.pauleveritt.org/articles/pylyglot/es6_imports/

了解更多信息

Answer 4

我遇到了同样的问题。在stackoverflow及其他方面尝试了所有其他解决方案之后，在package.json上添加这个简单的配置为我做了：

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

之后我所有的ES6进口都有效。顺便说一句，我在webpack.config.js中有相同的配置，但显然这是使其适用于mocha测试的唯一方法。

希望这有助于某人。

Answer 5

我的.babelrc文件中有{"modules": false}，如下所示：

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

投掷

意外的令牌导入

一旦我删除它，摩卡就成功运行了。

Answer 6

我遇到了同样的问题并通过阅读babel documentation来解决这个问题，以便将Babel与Mocha整合在一起：

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

Answer 7

对于使用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修复了诸如异步/等待功能之类的问题，如果您碰巧正在使用它们的话。

希望对某人有帮助：）

Answer 8

我发现使用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'

Answer 9

--compilers已被弃用。

我的简单解决方案：

npm install --save-dev babel-core

在package.json中添加你的测试脚本：

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

Answer 10

这对我有用。使用--compilers标志时收到警告。

DeprecationWarning：将来的版本中将删除“ --compilers” 摩卡咖啡有关更多信息，请参见https://git.io/vdcSr

因此，我将其替换为--require标志

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

这是我的.babelrc：

{
  "presets": ["env"]
}

我的package.json开发人员依存关系

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

Answer 11

如果您使用的是TypeScript，则可能需要specify the extensions option：

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

Answer 12

我今天上午通过以下说明解决了该问题

安装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"]
}

Answer 13

我今天早上按照official Using Babel instructions对摩卡4的说明解决了这个问题：

安装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"]
}

Answer 14

我安装了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

Answer 15

我要在此处添加另一个ES6 + mocha + babel配置答案，该答案截至19年6月为止（请参见答案/注释上的日期）。 mocha已弃用--compiler标志，即使使用--no-deprecation标志，我正在使用的版本也无法使用，请参见c.f。 this

请注意，我不会包含链接页面中的所有相关部分，因为它们没有一个使我接受基于最新版本的mocha和babel的干净测试版本；该答案应包括使我成功进行测试构建的步骤。

按照此处以及this answer和here中的说明进行操作，我尝试使用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关键字。如上所述，如果有人可以回答这个问题，请发表评论，我将用更好的信息更新我的回答。

Answer 16

我遇到了同样的问题。在运行测试时，我意识到我实际上想要存根依赖模块。它有利于单元测试并防止babel转换子模块。所以我使用proxyquire，即：

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

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

Answer 17

以获得更加面向未来的设置

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

和.babelrc

{
  "presets": [ "latest" ]
}

而不是......

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

和

{
 "presets": [ "es2015" ]
}

运行mocha测试时导入Babel意外的令牌

17 个答案:

对于Babel＆lt; 6

对于Babel6 / 7 +