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

92

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

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

SyntaxError：意外的令牌导入

在此之前，项目B声称存在以下错误代码行：

（函数（导出，需求，模块，__ filename，__ dirname））{从'history / lib / createBrowserHistory'导入createBrowserHistory；

Iife似乎与npm或可能与babel有关，因为我的源文件仅包含“从'history / lib / createBrowserHistory'导入import createBrowserHistory”；项目B的测试套件中的单元测试运行良好，并且如果我将Project 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.js  npm  syntax-error  mocha  babeljs 
— ThoughtInBits
source
1
如果要在npm上分发模块，则只应分发该模块的转译版本。
— loganfsmyth，2016年
这个项目很轻。它主要供我自己使用，如果其他人有可以支持它的蒸腾过程，它通常是供我使用的。我正在尝试在这些依赖项中实现“ vanilla es6”。
— ThinkingInBits
2
我想您忘记在package.json中配置babel了。将它们添加到package.json“ babel”：{“ presets”：[“ es2015”]}
— Jacob Jacob
3
注意：根据文档 --compilers不是必需的，--require babel-register应改为使用：“如果您的ES6模块具有扩展名.js，则可以npm install --save-dev babel-register并使用mocha --require babel-register; --compilers仅在需要指定文件扩展名时才需要。”
— try-catch-finally
1
最终，我能够使用"babel":{"presets": ["es2015"]}它来工作，这是我所缺少的最后一件事！
— 布兰登

Answers:

79

对于Babel <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）参数运行摩卡

对于摩卡7或更高版本，分别使用--require babel-register或--require @babel/register。

— 深层元素
source
27
尝试使用--require babel-register参数运行mocha
— kolec
2
@kolec这有效。更好的是，mocha.opts在/ test目录的根目录中创建一个文件并将其添加到该位置
— Martin Dawson
3
所有这些仍然没有帮助（命令行，而不是mocha.opts）。
— 凯夫
3
如果要使用es2016，请记住Babel中的es2016“仅将ES2016中的内容编译为ES2015”，因此您需要在预设数组中同时使用 es2016和es2015
— prauchfuss
4
--compilers现在已弃用。使用--require代替。
— 罗布施（Robsch）
46

似乎唯一的解决方案是显式包括： 

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)/
});

添加一个entry.js如果您的应用程序还依赖于babel-node，请。这充当es6包含应用程序的包装。

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

然后，您将使用 node entry

对于Mocha测试，testHelper.js还应要求registerBabel.js在运行时初始化babel支持。

require('./registerBabel');

并用以下命令运行摩卡测试 mocha --require ./testHelper.js '+(test)/**/*Spec.js'

这将递归测试“ ./test”中任何以“ Spec.js”结尾的文件。用与您的项目中的规范匹配的模式替换模式。

— ThoughtInBits
source
3
似乎ignore正则表达式有点差。ignore: /node_modules\/(?!ProjectB)/为了使babelRegister文件正常工作，我必须在node_modules：之后添加一个转义的反斜杠。否则看起来很棒！
— hellatan
由于require语句，这不允许我们使用Rollupify。您是否知道不使用require语句即可执行此操作的方法？
— MikesBarto2002 '16
很好，但是不允许添加这样的代码并且想要直接运行文件的工具呢？然后，您最终babel-node无法使用.babelrc。
— Evgeny
1
您真棒！Babel只是在运行服务器时正在处理我的ES6代码，但是Mocha测试会失败。您的答案解决了。我在mocha.opts中尝试了--compilers，但是这导致导入语句失败。
— 活力像素
1
我无法使它正常工作，但事实证明，我还需要扩展babelrc：```require（'@ babel / register'）（{扩展名：'./.babelrc'，忽略：[/ node_modules \ /（?! ProjectB）/]}）; ```
— TiggerToo
26

好吧，肯定会遇到这个问题，因为您正在使用的Mocha不知道的ES6

因此，您使用的是babel，但您没有在测试中使用它...

解决方案：

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：

摩卡--compilers js：babel-core / register test * .js

您可以在http://www.pauleveritt.org/articles/pylyglot/es6_imports/了解更多信息

— 奥菲尔·阿塔尔（Ofir Attal）
source
1
非常感谢！我缺少--compilers js：babel-core / register选项
— mycargus
1
我已经在做这个了...您甚至读过最初的问题吗？
— ThinkingInBits
1
@ThinkingInBits您最终使用了什么，您（如果这样做）如何解决了该问题？我在这里遇到了严重麻烦，尝试了其中大多数选项
— Milan Velebit
--compilers现在已弃用，看来--require是唯一可以安全使用的选择
— Ali Ghanavatian
23

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

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

此后，我所有的ES6导入都起作用了。顺便说一下，我在webpack.config.js中有相同的配置，但是显然这是使其也可以用于Mocha测试的唯一方法。

希望这对某人有帮助。

— 阿拉诺
source
我的.babelrc文件拼写错误，因此最初无法正常工作。此解决方案有效，是推荐的解决方案。在您的项目中创建一个.babelrc文件，并添加{“ presets”：[“ es2015”]}
— AfDev
14

我{"modules": false}在我的.babelrc文件中有这样的内容：

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

扔了

意外的令牌导入

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

— 乔·泰德
source
这是由Webpacker for Rails生成的。 “ useBuiltIns”：true}]，“ react”```一旦删除了模块行，它就对我有用。
— emptywalls
当CircleCI无法运行我的笑话单元测试并给我意外的令牌导入错误时，这解决了我的问题。+1！
— Candlejack，
这为我做到了。Rails，Webpacker等...谢谢！
— emptywalls
6

对于使用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如果您碰巧正在使用异步/等待功能，则修补程序可以解决这些问题。

希望能帮助到别人:)

— 亚兹达尼
source
3

--compilers 不推荐使用。

我的简单解决方案： 

npm install --save-dev babel-core

然后在package.json中添加您的测试脚本，如下所示：

  "scripts": {
    "test": "mocha --require babel-core/register ./test/**/*.js -r ./test-setup.js"
  },
— E.福泰斯
source
3

我要在此处添加另一个ES6 + mocha + babel配置答案，该答案截至19年6月为止（请参阅答案/注释上的日期）。摩卡已经过时的--compiler标志和版本，我使用的是具有与不可用甚至--no-deprecation标志，比照本

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

按照此处和此答案中以及此处的说明进行操作，我尝试使用以下命令安装似乎最低的最新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对您没有帮助，请参考上面链接的页面。因此，按照此处的说明，我调整了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"]
}

我不记得是什么促使了这一点，但是我相信这是因为摩卡咖啡继续抱怨无法import在我的test.js中识别该关键字。如上所述，如果有人可以回答这个问题，请发表评论，我将用更好的信息更新我的回答。

— pb2q
source
此时，我可以成功运行我的摩卡测试了。我意识到这里的知识尚有不足：我已经写了很多生产javascript代码，但是我是一个相对的节点菜鸟。任何看到更多内容的人都可以添加到答案中，请发表评论，我会改善答案，或者留下您自己的更好答案。
— pb2q
2

我发现使用babel 6.XX最简单的方法是使用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"
    ]
  }
}

巴贝尔

{
  "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'

— 杰米·赫伯（Jamie Hutber）
source
2

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

DeprecationWarning：在以后的Mocha版本中，将删除“ --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",
}
— 生产编码器
source
2

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

安装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"]
}
— 安德烈·塔格（Andrey Tagaew）
source
1

今天早上，我按照 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"]
}
— 道格·威廉
source
0

在代码中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
— 田杰夫
source
-1

我有同样的问题。运行测试时，我意识到我实际上想对依赖模块进行存根。这对单元测试很有用，可以防止babel转换子模块。所以我用proxyquire，即：

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

const myTestedModule = proxyquire('../myTestedModule', {
    'dependentModule1': { //stubbed module1 },
    'dependentModule2': { //stubbed module2 }
})
— 汤姆库尔
source
这更适合作为评论。
— 朱斯
-3

以获得更未来的证明

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

和.babelrc

{
  "presets": [ "latest" ]
}

相对于...

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

和

{
 "presets": [ "es2015" ]
}
— 菲尔·亨利·麦克布
source
2
我猜这个答案实际上与这个问题无关。或者，它可以作为评论添加到另一个答案
— 62mkv 2016年
@ 62mkv谢谢！成为鹰，保持这个地方干净的方法。
— 菲尔·亨利·麦克布
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.