使用 VisualStudio 代码的摩卡断点

是否可以使用 VisualStudio 代码向 Mocha 测试添加断点？

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

53896 次浏览
小开

我已经想出了一个办法，我把它归类为 解决办法。我希望 Visual Studio 代码团队能够为此提供一个更加明确的解决方案，但与此同时，我所做的是:

  1. 我已经创建了一个 ./settings/mocha.js文件，它以编程方式运行 mocha，并将参数作为要运行的文件列表传递。您可以看到完整的文件 给你;

  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": { }
}

    完整的 launch.json 示例

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

小开

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

建议更深入的解释(来自安德烈)

要做到这一点:

Run mocha from the command line using this command:

mocha --debug-brk

Now in VS Code click on the Debug icon, then select Attach from the option next to the start button. Add breakpoints in VS Code and then click start.

小开

我已经在 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"}
}
]
}

它也可作为一个要点 给你。

需要更改的关键值是 program和 args，前者应设置为 _mocha可执行文件，后者应设置为测试文件的数组。

小开

对于任何使用 Windows 的人来说。如果你已经在全球范围内安装了摩卡，那么设置程序到下面的路径对我来说是可行的(在你的用户名中交换)。

"program": "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\mocha\\bin\\_mocha"
小开

When using TypeScript, the following configuration works for me in 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"
]
}

The important things to note here is that source maps are generated and that the output directory for the js is set to 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 运行“ Attach”启动配置
小开

如果你不想使用 --debug-brk + Attach 或者说明全局 mocha 安装的绝对路径(如果你将 launch.json 置于版本控制之下并且在不同的机器上有多个开发人员，那么这个路径就会停止) ，将 mocha 作为一个开发依赖项安装，并将其添加到 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 代码支持颜色。

小开

我在 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 needs to be installed in the npm modules directory.

小开

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

此外，还有一个关于如何使用—— debug-brk 选项的 描述。

最后，这里是使用 VS Code 和 Gulp 任务运行程序的 tasks.json 文件的 如何使用 Mocha 测试调试代码的替代版本。

小开

很抱歉又添加了一个答案，但是在 VSCode1.8.1和包含在其中的标准 Node 调试器中，前面的答案都不太适合我。下面是我解决这个问题的方法(参考之前的答案和官方的 VS Code Node.js Debugging文档) ，只需要一次点击/按键调试:

  • 确保在 packages.json: "devDependencies": { "mocha": "^3.2", ... }中将摩卡安装为 devDependency
  • 在您的 package.json目录中运行 npm install，以确保现在在 node_modules/中安装了 mocha
  • 打开 .vscode/launch.json(或在 VS Code 中，按 F1，开始键入“ laun”，并选择“ 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属性中都进行了匹配更改，就可以随意更改端口。

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

是否将 .vscode/launch.json放入存储库取决于您和您的团队。这是一个只支持 IDE 的文件，但是您的整个团队可以像这样使用它，没有问题，因为所有的路径和安装都是相对的和显式的。

提示: package.json可以包含一个 scripts标记，它也可以启动带有类似 "test": "./node_modules/.bin/mocha"的东西的摩卡，但是 VS Code 不使用它ーー而是在命令行运行 npm test时使用它。这个让我有点困惑。在这里注意，以防其他人也感到困惑。

编辑: VS Code 1.9.0在调试配置下拉列表中添加了“ Add Configuration”选项，您可以选择“ Node.js Mocha Test”，这有助于简化上述大部分内容。您仍然需要确保摩卡在您的 node_modules中，并且可能必须更新 cwd和最后的 runtimeArgs(这是查找测试的模式)以指向适当的路径。但是一旦您设置了这两个属性，它应该从那里开始工作。

小开

这是我在 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"
}
小开

对于那些使用咕噜或咕噜，配置是相当简单的。

发射 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');};
小开

在 VSCode version 1.13.0(macOS)中，他们将其内置在配置-> Mocha Tests下。

小开
最佳答案

Did you know, that you just go into your launch config, put your cursor after or between your other configs and press ctrl-space to get a current, valid mocha config auto-generated?

这对我来说完全没问题，包括在断点停止。 ( I also had a prior, now outdated one, that did no longer for various setting-related reasons. )

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 已经废除了(至少对于 Node > = Version 8的任何人)。

小开

在 launch.json 中，在下面添加另外一个配置

{
"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"
},

if you need to configure node version, simply add runtimeExecutable field like this

{
"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"
},
小开

如果在 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"
}
小开
  1. 转到 Debug > Add Configuration...菜单
  2. 选择 Node.js环境
  3. 从出现的下拉列表中选择 Mocha Tests选项
  4. 键入测试文件的路径作为 args属性的最后一项
  5. 加入 breakpoint
  6. Click on Debug icon
  7. Select Mocha Tests as a configuration
  8. 按 Start debugging键
  9. :-)
小开

当使用 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以包含您可能想要添加断点的所有内容。在单项目和多个依赖项目中，这可能更加单调乏味。

小开

1)浏览

。 vscode

那么

发射 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) Set breakpoints in test file and then press F5

小开

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

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

package.json script is: 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中。

小开

最简单的办法

将以下代码添加到. vscode 文件夹中的 launch.json:

{
"name": "Unit tests",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": [
],
}

不过，您可能还需要添加一个超时参数:

 {
"name": "Unit tests",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": [
"--timeout",
"999999"
],
}
小开

Github 上的官方 microsoft/vscode-recipes有这样一个 launch.json，用于调试摩卡测试(请输入更多摩卡测试配置的链接) :

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Mocha All",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"--timeout",
"999999",
"--colors",
"${workspaceFolder}/test"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"skipFiles": [
"<node_internals>/**/*.js"
]
},
{
"type": "node",
"request": "launch",
"name": "Mocha Current File",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"--timeout",
"999999",
"--colors",
"${file}"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"skipFiles": [
"<node_internals>/**/*.js"
]
}
]
}
小开

所以，我在使用 monorepo (例如 /repo/sub-repo)时遇到了这个问题，它有一个带有 package.json 的子文件夹和自己的 mocha 配置，但是在调试器中从根文件夹而不是子文件夹启动 mocha。切换到子文件夹并在那里创建一个摩卡配置完全解决了这个问题。


提交答案