使用Visual Studio Code的Mocha断点

问题描述 投票：80回答：19

是否可以使用Visual Studio Code为Mocha测试添加断点？

通常在调试代码时需要配置launch.json，将program属性设置为要执行的javascript文件。我不知道如何为摩卡做这个。

node.js visual-studio-code mocha tdd
19个回答
69
投票

你知道吗，你刚进入你的启动配置，把你的光标放在其他配置之后或之间，然后按下ctrl-space以获得当前有效的mocha配置自动生成？

这对我来说非常好。包括在断点处停车。 （我也有一个先前的，现在过时的，不再出于各种与设置相关的原因。）

enter image description here

从VSCode 1.21.1（2018年3月）开始，这会产生：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Mocha (Test single file)",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "${workspaceRoot}/node_modules/.bin/mocha",
        "--inspect-brk",
        "${relativeFile}",
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
}

旁注：debug-brk is deprectated（对于任何Node> = Version 8的人）。

2
投票

在launch.json中，在下面添加1个配置

{
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--timeout",
        "10000",
        "${workspaceRoot}/services/*.spec.js",
        "${workspaceRoot}/*.spec.js"
      ],
      "internalConsoleOptions": "openOnSessionStart"
    },

如果您需要配置节点版本，只需像这样添加runtimeExecutable字段

{
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--timeout",
        "10000",
        "${workspaceRoot}/services/*.spec.js",
        "${workspaceRoot}/*.spec.js"
      ],
      "internalConsoleOptions": "openOnSessionStart",
      "runtimeExecutable": "${env:HOME}/.nvm/versions/node/v8.2.1/bin/node"
    },
1
投票

对于任何使用Windows的人。如果您已经全局安装了mocha，那么将程序设置为以下路径适用于我（交换您的用户名）。

"program": "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\mocha\\bin\\_mocha"
1
投票

这对我来说是在Windows 7机器上工作的。我确实在全局安装了mocha，但是这个配置指向项目安装以避免需要用户配置文件路径（顺便说一句，我尝试使用％USERPROFILE％变量但没有成功）。我现在能够在我的摩卡测试中设置断点。好极了！

{
        "name": "Mocha Tests",
        "type": "node",
        "request": "launch",
        "stopOnEntry": false,
        "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
        "cwd": "${workspaceRoot}",
        "args": ["./test/**/*.js"],
        "runtimeExecutable": null,
        "envFile": "${workspaceRoot}/.env"
    }
1
投票

对于那些使用grunt或gulp的人来说，配置非常简单。

Launch.json

{
"version": "0.2.0",
"configurations": [

    {
        "name": "Run mocha by grunt",
        "type": "node",
        "program": "${workspaceRoot}/node_modules/grunt/bin/grunt",
        "stopOnEntry": false,
        "args": ["mochaTest"],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": null
    }
]}

Gruntfile.js

module.exports = function (grunt) {

grunt.initConfig({
    mochaTest: {
        test: {
            options: {
                reporter: 'spec'
            },
            src: ['test/**/*test.js']
        }
    }
});

grunt.loadNpmTasks('grunt-mocha-test');

grunt.registerTask('default', 'mochaTest');};
1
投票

在VSCode版本1.13.0（macOS）中，它们内置于配置 - > Mocha Tests。

1
投票

使用Babel或生成javascript文件但在源代码中放置断点时 - 您必须确保启用sourceMaps并定义outFiles。这是一个适合我的示例配置。

    {
        "name": "Mocha Test",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/packages/api/node_modules/mocha/bin/_mocha",
        "cwd": "${workspaceRoot}/packages/api",
        "args": ["--colors", "--no-timeouts", "out/test"],
        "outFiles": ["${workspaceRoot}/packages/api/out/*"],
        "sourceMaps": true,
    },

注意 - 您需要修改outFiles以包含您可能想要添加断点的所有内容。在monorepo和多个依赖项目中，这可能会更加繁琐。

0
投票

使用TypeScript时，以下配置适用于Visual Studio Code 0.8.0（tsc 1.5.3）

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "build",
        "declaration": false
    },
    "files": [
        "./src/index.ts",
        "./src/test/appTests.ts"
    ]
}

这里需要注意的重要事项是生成源映射，并将js的输出目录设置为build

launch.json

    {
        "name": "Attach",
        "type": "node",
        // TCP/IP address. Default is "localhost".
        "address": "localhost",
        // Port to attach to.
        "port": 5858,
        "sourceMaps": true,
        "outDir": "build"
    }

请注意，sourceMaps设置为true，outDir设置为build

调试

  1. 在index.ts中粘贴任何其他导入的打字稿文件的断点
  2. 打开终端并运行：mocha --debug-brk ./build/test/appTests.js
  3. 从VSC运行“附加”启动配置
0
投票

以下是Microsoft的launch configuration (launch.json)示例，它与Mocha一起使用并允许使用调试器。

此外，还有一个如何使用--debug-brk选项的description。

最后，这里是使用VS Code和Gulp任务运行器的tasks.json文件的alternative version of how to debug code with Mocha tests。

0
投票

1）去

.vscode

然后

launch.json

文件

2）在launch.json中添加以下配置 - 

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Test",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/*folder_path_containing_test*/node_modules/.bin/mocha",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/*folder_path_containing_test*/node_modules/.bin/mocha.cmd"
            },
            "runtimeArgs": [
                "--colors",
                "--recursive",
                "${workspaceRoot}/*folder_path_till_test*/tests"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/*folder_path_to_test*/app.js"
        }
    ]
}

3）在测试文件中设置断点，然后按F5

0
投票

如果你在测试中有一些依赖，那么它也很容易附加。

例如，我使用mongo-unit-helper也有与数据库集成的单元测试。

package.json脚本是：mocha --recursive --require ./test/mongo-unit-helper.js --exit"

我的launch.json看起来像：

  "configurations": [
  {
  "type": "node",
  "request": "launch",
  "name": "Mocha Tests",
  "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
  "args": [
    "-u",
    "tdd",
    "--timeout",
    "999999",
    "--colors",
    "--recursive",
    "--require",
    "${workspaceFolder}/test/mongo-unit-helper.js",
    "${workspaceFolder}/test/**/*.js",
  ],
  "internalConsoleOptions": "openOnSessionStart"
 }
]

解决方案是将--require分别放入args的launch.json。

67
投票

如果您不想使用--debug-brk + Attach或声明全局mocha安装的绝对路径（如果您将launch.json保留在版本控制下并且在不同的计算机上有多个开发人员，则会生效），请将mocha安装为dev依赖项并将其添加到您的launch.json：

{
  "name": "mocha",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
  "stopOnEntry": false,
  "args": ["--no-timeouts", "--colors"], //you can specify paths to specific tests here
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "env": {
    "NODE_ENV": "testing"
  }
}

只需按F5即可在测试中获得完全调试支持。

--no-timeouts确保你的测试没有超时，因为你停在断点处，并且--colors确保Mocha输出颜色，即使它没有检测到VS Code支持颜色。

42
投票

另一种方法是使用mocha的--debug-brk命令行选项和Visual Studio Code调试器的默认Attach启动设置。

建议更深入的解释（来自André）

去做这个：

使用以下命令从命令行运行mocha：

mocha --debug-brk

现在在VS Code中单击Debug图标，然后从开始按钮旁边的选项中选择Attach。在VS Code中添加断点，然后单击“开始”。

23
投票

我在OS X 10.10上的VSCode上做了这个工作。用这个替换你的./settings/launch.json文件。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Run app.js",
            "type": "node",
            "program": "app.js", // Assuming this is your main app file.
            "stopOnEntry": false,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "env": { "NODE_ENV": "production"}
        },
        {
            "name": "Run mocha",
            "type": "node",
            "program": "/Users/myname/myfolder/node_modules/mocha/bin/_mocha",
            "stopOnEntry": false,
            "args": ["test/unit.js"],
            "cwd": ".",
            "runtimeExecutable": null,
            "env": { "NODE_ENV": "production"}
        }
    ]
}

它也可作为要点here。

您需要更改的关键值是program，它应该设置为_mocha可执行文件，args应该是您的测试文件的数组。

10
投票

我在Mac OS X上使用VS Code（1.8.2）的方法是：

{
    "name": "Mocha",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "stopOnEntry": false,
    "args": ["--recursive"], //you can specify paths to specific tests here
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": null,
    "env": {
        "NODE_ENV": "testing"
    }
}

Mocha需要安装在npm模块目录中。

7
投票
  1. 去Debug > Add Configuration...菜单
  2. 选择Node.js环境
  3. 从出现的下拉列表中选择Mocha Tests选项
  4. 键入测试文件的路径作为args属性的最后一项
  5. 添加一个breakpoint
  6. 点击Debug图标
  7. 选择Mocha Tests作为配置
  8. 按Start debugging按钮
  9. :-)
6
投票

我已经找到了一种方法来实现这一点，我将其归类为一种解决方法。我希望Visual Studio Code团队为此提供更明确的解决方案，但与此同时我做了以下事情：

  1. 我创建了一个./settings/mocha.js文件，它运行mocha以编程方式将参数作为要运行的文件列表。你可以看到完整的文件here;
  2. 我创建了一个启动配置，它将./settings/mocha.js作为program运行，并传递我们需要测试的文件/文件模式作为参数： { "name": "Unit tests", "type": "node", "program": ".settings/mocha.js", "stopOnEntry": true, "args": ["test/unit/*.js", "test/unit/**/*.js"], "cwd": ".", "runtimeExecutable": null, "env": { } } Full launch.json example

所以这相当于做mocha test/unit/*.js test/unit/**/*.js，现在我们可以在我们的mocha测试中使用断点。

3
投票

如果在args列表的末尾添加$ {file}变量，则可以直接从已打开的文件开始调试：

        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Tests",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "args": [
                "-u",
                "tdd",
                "--timeout",
                "999999",
                "--colors",
                "${file}"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        }
2
投票

很抱歉添加了另一个答案，但是从VS Code 1.8.1和其中包含的标准Node调试器开始，以前的所有答案都不适用于我。这是我解决它的方式（在此处和官方VS Code Node.js Debugging文档的前面答案的指导下）所以有一次点击/按键调试：

  • 确保mocha安装为devDependency中的packages.json："devDependencies": { "mocha": "^3.2", ... }
  • 在你的npm install目录中运行package.json以确保mocha现在安装在node_modules/中
  • 打开.vscode/launch.json（或在VS Code中，按F1，开始键入“launch”，然后选择“Debug：Open launch.json”）
  • 单击右下方的蓝色“添加配置”按钮（或者只复制并粘贴其他一个）;这一步是可选的......我的意思是，你可以重用现有的配置。但我建议添加一个以减少它的混乱。
  • 在launch.json中更改以下内容，然后在VS Code的调试窗口中选择新的配置名称，然后单击绿色箭头开始调试节点+ mocha测试！

在launch.json:的新配置中

"configurations": [{
    "name": "whatever name you want to show in the VS Code debug list",
    "type": "node",
    "cwd": "${workspaceRoot}",
    "program": "${workspaceRoot}/node_modules/mocha/bin/mocha",
    "args": ["--debug-brk=5858", "--no-timeouts", "--colors", "test/**/*.js"],
    "address": "localhost",
    "port": 5858,
    // the other default properties that are created for you are fine as-is
}, ...]

这假设模式test/**/*.js适用于您进行测试的位置。适当变化。

只要您在args和port属性中更改它以匹配，您可以随意更改端口。

我的主要区别在于确保mocha在node_modules，使用program指向可执行文件，args需要debug-brk=x指向port中指定的端口。上面的其余部分只是让事情变得更漂亮，更容易。

如果你把.vscode/launch.json放在存储库中，这取决于你和你的团队。它是一个仅限IDE的文件，但您的整个团队可以像这样使用它，没问题，因为所有路径和安装都是相对且明确的。

提示：package.json可以包含一个scripts标签，它也可以像"test": "./node_modules/.bin/mocha"一样启动mocha，但它不被VS Code使用 - 而是在npm test在命令行运行时使用。这个让我困惑了一下。注意到它，以防其他人也感到困惑。

编辑：VS Code 1.9.0在调试配置下拉列表中添加了“添加配置”选项，您可以选择“Node.js Mocha Tests”来帮助简化上述大部分内容。你仍然需要确保mocha在你的node_modules中，并且可能需要更新cwd和最后的runtimeArgs（这是找到你的测试的模式）指向适当的路径。但是一旦你设置了这两个属性，就应该从那里开始工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.