运行 mocha 测试时 Babel 意外令牌导入
Posted
技术标签:
【中文标题】运行 mocha 测试时 Babel 意外令牌导入【英文标题】：Babel unexpected token import when running mocha tests 【发布时间】：2016-05-04 14:49:56 【问题描述】：其他相关问题中提供的解决方案，例如在 .babelrc 中包含正确的预设（es2015），已经在我的项目中实现。
我有两个项目（我们称它们为 A 和 B），它们都使用 ES6 模块语法。在项目 A 中，我正在导入通过 npm 安装并位于 node_modules 文件夹中的项目 B。当我为项目 A 运行测试套件时，出现错误：
SyntaxError: 意外的令牌导入
前面是来自项目 B 的所谓错误代码行：
(function (exports, require, module, __filename, __dirname) import createBrowserHistory from 'history/lib/createBrowserHistory';
iife 似乎与 npm 或可能与 babel 相关，因为我的源文件仅包含“import createBrowserHistory from 'history/lib/createBrowserHistory'; 项目 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'"
这篇 *** 帖子类似，但没有为我使用命令行提供解决方案： import a module from node_modules with babel but failed
【问题讨论】：
如果你在 npm 上分发一个模块，你应该只分发该模块的转译版本。 这个项目非常轻量级。它主要供我自己使用，或者其他人，如果他们有一个可以支持它的蒸腾过程。我正在尝试在这些依赖项中实现“vanilla es6”。 我想你忘记在 package.json 中配置 babel。将它们添加到你的 package.json "babel": "presets": ["es2015"] 注意：according to the documentation--compilers 不是必须的，应该使用--require babel-register 代替：“如果你的 ES6 模块有扩展名 .js，你可以 npm install --save-dev babel-register并使用 mocha --require babel-register； --compilers 只有在需要指定文件扩展名时才需要。"
终于我能够使用"babel":"presets": ["es2015"] 让它工作了，这是我错过的最后一件事！
【参考方案1】：
通天塔
解决这个问题最简单的方法是：
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。
【讨论】：
尝试使用 --require babel-register 参数运行 mocha @kolec 这行得通。更好的是，在 /test 目录的根目录下创建一个mocha.opts 文件并将其添加到那里
所有这些加在一起仍然没有帮助（命令行，而不是 mocha.opts）。
如果你想使用 es2016，请记住 Babel 中的 es2016“只将 ES2016 中的内容编译到 ES2015”，所以你需要 both es2016 和 es2015 在你的预设数组中
--compilers 现在已弃用。请改用--require。【参考方案2】：
似乎唯一的解决方案是明确包括：
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 还应该需要 registerBabel.js 以在运行时初始化 babel 支持。
require('./registerBabel');
然后使用 mocha --require ./testHelper.js '+(test)/**/*Spec.js' 运行你的 mocha 测试
这将递归测试“./test”中以“Spec.js”结尾的任何文件。将模式替换为与项目中的规范匹配的模式。
【讨论】：
看来ignore 正则表达式有点不对劲。我必须在 node_modules:ignore: /node_modules\/(?!ProjectB)/ 之后添加一个转义反斜杠，以便 babelRegister 文件正常工作。否则看起来很棒！
这不允许我们使用 Rollupify，因为需要语句。你知道不使用 require 语句的方法吗？
这很好，但是那些不允许添加这样的代码并希望直接运行文件的工具呢？然后你最终得到babel-node，它不允许使用.babelrc。
你太棒了！ Babel 在运行服务器时正在处理我的 ES6 代码，但 mocha 测试会失败。你的回答解决了。我在 mocha.opts 中尝试了 --compilers 但这导致导入语句失败。
我无法让它工作，但事实证明我还需要扩展我的 babelrc: ``` require('@babel/register')( extends: './.babelrc '，忽略：[/node_modules\/(?!ProjectB)/] ); ```【参考方案3】：
你肯定会遇到这个问题，你使用的是 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：
mocha --compilers js:babel-core/register test*.js
您可以在http://www.pauleveritt.org/articles/pylyglot/es6_imports/阅读更多内容
【讨论】：
非常感谢！我错过了 --compilers js:babel-core/register 选项 我已经在做这个了……你读过最初的问题吗？ @ThinkingInBits 你最终使用了什么，你是如何（如果你这样做的话）解决这个问题的？我在这里遇到了严重的麻烦，尝试了大多数这些选项--compilers 现在已弃用，看起来--require 是唯一安全的选择【参考方案4】：
我遇到了同样的问题。在 *** 及其他方面尝试了所有其他解决方案后，在 package.json 上添加这个简单的配置为我做到了：
"babel":
"presets": [
"es2015"
]
在那之后我所有的 ES6 导入都工作了。 顺便说一句，我在 webpack.config.js 中也有相同的配置，但显然这是使它也适用于 mocha 测试的唯一方法。
希望这对某人有所帮助。
【讨论】：
我有一个 .babelrc 文件拼写错误，所以它最初无法正常工作。此解决方案有效，是推荐的解决方案。在你的项目中创建一个 .babelrc 文件并添加 "presets":["es2015"]【参考方案5】：我的 .babelrc 文件中有 "modules": false，如下所示：
"presets": [
["es2015", "modules": false],
"stage-2",
"react"
]
这是在扔
意外的令牌导入
一旦我删除它，摩卡就成功运行了。
【讨论】：
这是由 Webpacker for Rails 生成的：``` "presets": [ [ "env", "modules": false, "targets": "browsers": "> 1%" , "uglify": true , "useBuiltIns": true ], "react" ``` 一旦我删除了 modules 行，它就为我工作了。 这解决了我的问题，当 CircleCI 无法运行我的笑话单元测试并给我意外的令牌导入错误时。 +1 ！ 这是为我做的。 Rails、Webpacker 等...谢谢！【参考方案6】：我遇到了同样的问题，并通过阅读 babel documentation 将 Babel 与 Mocha 集成来解决它：
"scripts":
"test": "mocha --compilers js:babel-register"
【讨论】：
Mocha 和 Babel 的哪个版本？ 我的 Babel 版本是6.26.0 除了 "babel-preset-env": "1.6.0" 和 "mocha": "3.5.3"
奇怪。这解决了我的问题，在我的情况下是一个纯粹的阅读文档问题。【参考方案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 修复了一些问题，例如 async/await 功能（如果您碰巧正在使用这些功能）。
希望对某人有所帮助:)
【讨论】：
【参考方案8】：我在这里添加另一个 ES6+mocha+babel 配置答案，截至 19 年 6 月（请参阅答案/评论上的日期）。 mocha 已弃用 --compiler 标志，而我使用的版本即使使用 --no-deprecation 标志也不可用，c.f. this
请注意，我不会包含链接页面中的所有相关部分，因为它们都没有让我基于最新版本的 mocha 和 babel 进行干净的测试构建；此答案应包括使我成功进行测试构建的步骤。
按照此处以及this answer 和here 中的说明，我尝试使用npm install 安装似乎是最新的最低限度的babel：
$ 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"]
我不记得是什么原因造成的，但我相信这是因为 mocha 继续抱怨无法识别我的 test.js 中的 import 关键字。如上所述，如果有人可以回答这个问题，请发表评论，我会用更好的信息更新我的答案。
【讨论】：
此时我可以成功运行我的 mocha 测试。我意识到我在这里的知识存在差距：我已经编写了很多生产 javascript 代码，但我是一个相对的节点菜鸟。任何看到此内容并添加到答案的人，请发表评论，我会改进答案，或者留下您自己更好的答案。【参考方案9】：--compilers 已弃用。
我的简单解决方案：
npm install --save-dev babel-core
然后在 package.json 中添加您的测试脚本，如下所示：
"scripts":
"test": "mocha --require babel-core/register ./test/**/*.js -r ./test-setup.js"
,
【讨论】：
【参考方案10】：这对我有用。我在使用 --compilers 标志时收到警告。
弃用警告：“--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",
【讨论】：
【参考方案11】：我发现使用 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'
【讨论】：
【参考方案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"]
【讨论】：
【参考方案13】：我今天早上通过official Using Babel instructions 为 Mocha 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"]
【讨论】：
【参考方案14】：如果你使用 TypeScript，你可能需要specify the extensions option：
require("@babel/register")(
extensions: ['.jsx', '.js', '.ts', '.tsx']
)
【讨论】：
【参考方案15】：我安装了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
【讨论】：
【参考方案16】：我遇到了同样的问题。
在运行测试时，我意识到我实际上想要存根依赖模块。它有利于单元测试并防止 babel 转换子模块。于是我用了proxyquire，即：
const proxyquire = require('proxyquire').noCallThru()
const myTestedModule = proxyquire('../myTestedModule',
'dependentModule1': //stubbed module1 ,
'dependentModule2': //stubbed module2
)
【讨论】：
这更适合作为评论。【参考方案17】：为了更面向未来的设置
npm install babel-preset-latest --save-dev
在.babelrc中
"presets": [ "latest" ]
相对于...
npm install babel-preset-es2015 --save-dev
和
"presets": [ "es2015" ]
【讨论】：
我猜这个答案实际上与这个问题无关。或者更确切地说，它可以作为评论添加到另一个答案 @ 62mkv 谢谢！成为鹰派并保持这个地方清洁的方式。以上是关于运行 mocha 测试时 Babel 意外令牌导入的主要内容，如果未能解决你的问题，请参考以下文章
意外的导入令牌 - 使用 Jest 测试 React Native