使用Babel 7运行Mocha 6 ES6测试，如何设置？

Question

我想为一个使用ES6/7编写的库进行编译（到ES5），并将其输出到dist/文件夹。同时，我也想运行这个库的测试（这些测试也是用ES6/7编写的）。

我的开发依赖项看起来像这样（package.json）：

"devDependencies": {
  "@babel/cli": "^7.4.4",
  "@babel/core": "^7.4.5",
  "@babel/preset-env": "^7.4.5",
  "@babel/register": "^7.4.4",
  "chai": "^4.2.0",
  "mocha": "^6.1.4",
  "sinon": "^7.3.2"
},

我的构建和测试脚本看起来像这样（package.json）：

"scripts": {
  "test": "mocha --require @babel/register",
  "build": "babel src -d dist --presets=@babel/preset-env"
},

运行npm run build很顺利，dist/文件夹中会填充转译后的文件。

运行npm run test似乎不起作用——这是我的问题所在。

> mocha --require @babel/register

/Users/dro/Repos/lib/node_modules/yargs/yargs.js:1163
      else throw err
           ^

ReferenceError: regeneratorRuntime is not defined

最初我遇到了一个导入错误，通过添加 .babelrc 文件解决了这个问题。

以下是我的 .babelrc 文件内容。

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

我在阅读关于regeneratorRuntime的内容时，发现了babel-polyfill的链接，其中他们解释说我不需要那个polyfill。

这将模拟完整的ES2015+环境（没有<Stage 4提案），旨在用于应用程序而不是库/工具。

要正确设置此内容，需要什么？

---

我没有使用webpack。

- miphe

---

阅读此答案以简要了解Babel：https://dev59.com/questions/6LDla4cB1Zd3GeqP_KPU#54017427 - vsync

Answer 1

使用Mocha和Babel 7进行ES6测试。请参考：https://dev.to/bnorbertjs/my-nodejs-setup-mocha--chai-babel7-es6-43ei 或者 http://jamesknelson.com/testing-in-es6-with-mocha-and-babel-6/

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

而在 .babelrc 文件中，添加如下内容：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

- Umbro

---

谢谢提供这些资源 - 我已经阅读了James Knelson的文章，但由于它是2015年的，所以不再适用。我现在会看一下dev.to！ - miphe

这篇关于编程的文章在dev.to上很有帮助，但仍然没有解决我的问题。他们使用的是Mocha 5，其中--compiler选项可用。在Mocha 6中，我们只能使用--require，如编译器弃用文章中所述。 - miphe

阅读讲稿：https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-adding-es6-support-to-tests-using-mocha-and-babel - Umbro

在 Babel 7 中，--compilers 标志已被弃用，取而代之的是 --register，我在上面使用了这个标志。我还更新了问题，并添加了一个 .babelrc 文件后出现了错误。我正在调试测试脚本，似乎这也会导致 "mocha --require @babel/register @babel/polyfill (Error: No test files found: "@babel/polyfill") 失败，但该软件包已安装。 - miphe

v7迁移文章非常有用 - 直到现在我才发现它。你的答案完美地解决了我的问题 - 谢谢！ - miphe

Answer 2

请查看项目文档：

npm install --save-dev babel-register

在您的package.json文件中进行以下更改：

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

一些功能需要使用polyfill：

npm install --save-dev babel-polyfill

{
  "scripts": {
    "test": "mocha --require babel-polyfill --require babel-register"
  }
}

- ET-CS

---

这种方法是可行的，但这里复制的步骤不足够。引用项目文档中的一句话：“太好了！你已经配置好了Babel，但你还没有让它真正做任何事情。”为了启用预设，你必须在你的.babelrc文件中定义它，就像这样： "presets": ["@babel/preset-env"] }``` - Zhiyong

附注：您应该使用@babel/PAKAGE-NAME而不是babel-PACKAGE-NAME。例如，使用@babel/register而不是babel-register。除了一些没有干净的1对1映射之外。Babel不久前从babel-约定切换到@babel/约定。 babel-包得到维护，但只有@babel/包正在更新。 - acat

Answer 3

以下步骤是为了在测试文件中应用Babel转换和core-js填充：

所有转换仅针对当前环境进行，因此只会对需要转译/填充的内容进行处理。目标环境可以从.browserslist文件或package.json文件中的属性定义。（在此处阅读更多）

步骤1：安装软件包：

1. @babel/core （了解原因）
2. @babel/preset-env（了解原因）
3. @babel/register（了解原因）
4. core-js（了解原因）

请注意，@babel/polyfill 存在，并在内部使用 core-js。 但是，它已被弃用，建议直接使用 core-js。

步骤2：创建 Babel 配置文件 babel.config.js

（曾经是.babelrc.js或.json文件）。 在您的代码根目录中创建此文件。

最基本的配置（仅用于测试和不捆绑）如下：

module.exports = {
  presets: [
    ['@babel/preset-env', { 
      "corejs": "3.26",   
      "useBuiltIns": "usage"
    }],
};

corejs - 这是一个polyfills库，应该指定其次要版本，否则将使用x.0。在测试代码时，有时需要在“旧的” Node 版本上使用，这些版本不支持所有的语言方法。当然，这取决于你自己对这些javascript方法的使用。（例如 String.prototype.replaceAll）。

useBuiltIns - 必须设置才能应用corejs polyfills。请参阅官方文档。

默认情况下，@babel/preset-env 将为当前环境编译代码，但您可以通过在配置中设置“targets”选项来指定不同的环境。

---

当然，你可以添加更多的预设，比如@babel/preset-react，如果你的代码是用React编写的，或者其他特定于你的代码所需的插件。

第三步：将mocha连接到babel配置中：

在你的package.json文件中，

在scripts部分下，简单地写入以下内容：

"test": "mocha \"src/**/*.test.js\""

创建一个.mocharc.json文件，并添加以下内容：

{
  "exit": true,
  "color": true,
  "require": ["@babel/register"],
  "ignore": "node_modules"
}

这将对您的所有测试文件应用 Babel 转换。

如果您需要在所有测试之前/之后应用一些特殊的全局 JavaScript，您可以将另一个文件添加到 require 设置中，例如，fixtures.cjs：

"require": ["@babel/register", "fixtures.cjs"],

fixtures.cjs:

下面的示例应用了一个 chai（与 Mocha 并列流行）插件来测试与 DOM 相关的代码：

var chai = require('chai'),
  chaiDOM = require('chai-dom');

// https://stackoverflow.com/questions/62255953/chai-usechaihttp-once-or-in-every-test-file
// https://mochajs.org/#global-teardown-fixtures
exports.mochaGlobalSetup = function () {
    chai.use(chaiDOM);
}

---

有趣的阅读：

• Babel vs babel-core vs babel-runtime
• Mocha / Babel 如何实时转译我的测试代码？

- vsync