其他相关问题中提供的解决方案,例如在 .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'"
这篇 StackOverflow 帖子类似,但没有为我使用命令行提供解决方案:import a module from node_modules with babel but failed
--compilers
不是必需的,应该使用 --require babel-register
代替:“如果您的 ES6 模块具有扩展名 .js,您可以 npm install --save-dev babel-register 并使用 mocha --require babel- register; --compilers 只有在您需要指定文件扩展名时才需要。"
"babel":{"presets": ["es2015"]}
让它工作,这是我错过的最后一件事!
对于通天塔 <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
。
似乎唯一的解决方案是明确包括:
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 文件正常工作。否则看起来很棒!
babel-node
,它不允许使用 .babelrc
做这样的事情。
好吧,你肯定会遇到这个问题,你使用的是 mocha 不知道的 ES6
所以你正在使用 babel,但你没有在测试中使用它......
几个解决方案:
A. 如果您使用 NPM 运行,请使用
"test": "mocha --compilers js:babel-core/register test*.js"
B. 我正在使用
“测试”:“./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
现在已弃用,看起来 --require
是唯一安全的选择
我遇到了同样的问题。在 stackoverflow 及其他方面尝试了所有其他解决方案后,在 package.json 上添加这个简单的配置为我做到了:
"babel": {
"presets": [
"es2015"
]
}
在那之后,我所有的 ES6 导入都起作用了。顺便说一句,我在 webpack.config.js 中也有同样的配置,但显然这是使它也适用于 mocha 测试的唯一方法。
希望这可以帮助某人。
我的 .babelrc 文件中有 {"modules": false}
,如下所示:
"presets": [
["es2015", {"modules": false}],
"stage-2",
"react"
]
这是在扔
意外的令牌导入
一旦我删除它,摩卡咖啡就成功运行了。
我遇到了同样的问题,并通过阅读 babel documentation 将 Babel 与 Mocha 集成来修复它:
{
"scripts": {
"test": "mocha --compilers js:babel-register"
}
}
6.26.0
,除了 "babel-preset-env": "1.6.0"
和 "mocha": "3.5.3"
对于任何使用 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 功能(如果您碰巧使用这些功能)。
希望对某人有所帮助:)
我在这里添加另一个 ES6+mocha+babel 配置答案,截至 19 年 6 月(请参阅答案/评论上的日期)。 mocha 已弃用 --compiler
标志,我使用的版本即使带有 --no-deprecation
标志也不可用,参见 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
关键字。如上所述,如果有人可以回答这个问题,请发表评论,我会用更好的信息更新我的答案。
--compilers
已弃用。
我的简单解决方案:
npm install --save-dev babel-core
并在 package.json 中添加您的测试脚本,如下所示:
"scripts": {
"test": "mocha --require babel-core/register ./test/**/*.js -r ./test-setup.js"
},
这对我有用。使用 --compilers
标志时收到警告。
弃用警告:“--compilers”将在 Mocha 的未来版本中删除;有关更多信息,请参阅 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",
}
我发现使用 babel 6.XX 最简单的方法是使用 nyc,然后将 helper
文件添加到 pckage.json
所以这就是我用的
包.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'
我今天早上按照以下说明解决了这个问题
安装 NPM 模块
npm install --save-dev @babel/polyfill
npm install --save-dev @babel/register
包.json:
"scripts": {
"test": "mocha --require @babel/register --require @babel/polyfill src/DesktopApplication/Tests",
}
.babelrc
{
"presets": ["@babel/env"]
}
我今天早上使用 Mocha 4 的 official Using Babel instructions 中的以下说明解决了这个问题:
安装 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
包.json:
"scripts": {
"test": "mocha --require babel-polyfill --require babel-register"
}
.babelrc
{
"presets": ["env"]
}
如果您使用的是 TypeScript,您可能需要 specify the extensions
option:
require("@babel/register")({
extensions: ['.jsx', '.js', '.ts', '.tsx']
})
我安装了 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
我有同样的问题。在运行测试时,我意识到我实际上想要存根依赖模块。它有利于单元测试并防止 babel 转换子模块。所以我使用了proxyquire
,即:
const proxyquire = require('proxyquire').noCallThru()
const myTestedModule = proxyquire('../myTestedModule', {
'dependentModule1': { //stubbed module1 },
'dependentModule2': { //stubbed module2 }
})
用于更面向未来的设置
npm install babel-preset-latest --save-dev
并在 .babelrc
{
"presets": [ "latest" ]
}
相对于...
npm install babel-preset-es2015 --save-dev
和
{
"presets": [ "es2015" ]
}
mocha.opts
文件并将其添加到那里--compilers
现在已弃用。请改用--require
。