Webstorm：调试用 ES6 编写的 Mocha 测试

Question

在为 Node.js 开发使用 WebStorm 10 时，我无法在调试时逐步完成测试用例（用 ES6 编写）。我猜转编译使测试文件不同步。想知道有没有人调试成功？

这是我的 test.js 文件

describe('TestFlow', function () {
    "use strict";

    it('Test Path', (done) => {
        console.log("Testing_1 happy path\n");
        console.log("Testing_2 happy path\n");
        done();
    });
});

我将 Mocha 选项配置为使用 --compilers js:babel/register。现在，当我尝试调试代码时，单步执行过程是不可预测的，它只是不起作用。 babel 编译搞乱了调试过程。

能否请您告诉我是否有解决此问题的方法？我认为调试 ES6 代码是 WebStrom 10 中的一个功能，但我没有运气

Answer 1

在 WebStorm 中，转到 Run/Edit Configurations.../Templates/Mocha/Extra Mocha options 并插入以下内容（取决于 babel 的版本：https://git.io/vdcSr）。

通天塔 7

--require @babel/register

通天塔 6

--require babel-core/register

Answer 2

现在至少在 WebStorm 2017.1 中有效。 JetBrains 已标记this issue as fixed

从终端：

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

在菜单运行/编辑配置...Mocha运行/调试配置下，输入这个选项：

Extra Mocha options: --compilers js:babel-core/register

另外，有一个 .babelrc 文件（或放在 package.json 中）

{
  "presets": [
    "es2015"
  ]
}

您现在应该能够运行和调试 ES6 单元测试 见this article as well

Answer 3

Webstorm 调试器不适用于运行时 babel 编译。您需要首先使用带有源映射的 babel 编译您的 ES6 文件，然后将它们放在 dist 目录中。您可以使用this gulp 任务来执行此操作。

在webstorm的debug mocha配置点工作目录到上面创建的dist目录。还将测试目录指向您在 dist 目录中的测试。在原始 ES6 测试文件中放置一个断点并开始您的调试会话。