使用 Visual Studio Code 的 Mocha 断点

Posted 2023-02-15

【中文标题】使用 Visual Studio Code 的 Mocha 断点

【英文标题】：Mocha breakpoints using Visual Studio Code

【发布时间】：2015-07-13 11:04:21

【问题描述】：

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

一般在调试代码时，需要配置launch.json，将程序属性设置为javascript文件执行。不过，我不确定如何为 Mocha 执行此操作。

【参考方案1】：

您知道吗，您只需进入启动配置，将光标放在其他配置之后或之间，然后按 ctrl-space 即可获得自动生成当前有效的 mocha 配置？

这对我来说非常好。包括在断点处停止。 （我也有一个以前的，现在已经过时了，由于各种与设置相关的原因，它不再适用了。）

从 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-brkis deprectated（至少适用于 Node >= 版本 8 的任何人）。

【讨论】：

我需要一些自定义代码来初始化文档并禁用热模块更换。在 "args" 块中传递此参数："--require", "$workspaceFolder/tools/testSetup.js",

VS Code 1.29.1：Ctrl+Space 自动生成的 Mocha 测试配置没有 debug-brk。尽管使用断点进行调试工作得很好。

我必须在我的（唯一的）其他配置的右括号后插入一个逗号，ctrl + space 才能工作。

有关 Mocha 正确配置的最新示例，请参阅：github.com/Microsoft/vscode-recipes/tree/master/…

仅供参考，接受的答案 @***.com/a/55883516/684271 揭示了截至 2020 年 11 月必须删除的内容。

【参考方案2】：

如果您不想使用--debug-brk+附加或声明全局 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 Code 支持颜色。

【讨论】：

对于其他有问题的人。注意 _mocha 而不是 mocha。仅使用 mocha 它将在 VS 代码中运行测试，但不会命中断点

对于那些使用 TypeScript 的人来说，这是一个合适的答案，只要您设置 sourceMaps: true。谢谢十亿！

要添加与 npm 兼容的自定义测试参数，请将 npm_config_myparam 之类的内容添加到 env 块中。在 CLI 上，它可能看起来像 npm --myparam=myvalue test。

【参考方案3】：

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

---

建议更深入的解释（来自安德烈）

为此：

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

mocha --debug-brk

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

【讨论】：

这种方式简单多了，几乎不需要配置

如果launch.json不存在，你必须将"request": "attach"添加到它——否则它会抱怨你必须指定一个程序或其他一些错误。

这似乎是 VS Code 特定的。在普通 VS 2015 中不起作用

很好的建议谢谢:)

请注意，--debug-brk 是nowadays deprecated，这就是为什么我建议auto-creating a fresh debug config in vscode，是的，也专门用于摩卡。

【参考方案4】：

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

它也可以作为 gist here.

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

【讨论】：

对我不起作用（在 Windows 上） - 但如果它有效，这似乎是一个很好的解决方案 :)

是的。对不起OpenDebug process has terminated unexpectedly

您可以尝试将"runtimeExecutable" 设置为"C:/Program Files/nodejs/node.exe" 或安装Node 的任何位置吗？

肯定 - 但没有变化。

我不使用 Windows，所以我无能为力。但是，请留意 this - 他们正在谈论这个 OpenDebug 问题。

【参考方案5】：

转到Debug > Add Configuration... 菜单 选择Node.js环境 从出现的下拉列表中选择Mocha Tests选项 键入测试文件的路径作为args 属性的最后一项 添加breakpoint 点击Debug图标 选择Mocha Tests作为配置 按Start debugging按钮 :-)

【参考方案6】：

我让它在 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 modules 目录下。

【讨论】：

这让我困了很久。我错误地使用了来自“which mocha”而不是 node_modules 的路径。谢谢！

【参考方案7】：

我想出了一种方法来做到这一点，我将其归类为解决方法。我希望 Visual Studio Code 团队为此提供一个更明确的解决方案，但同时这也是我所做的：

我创建了一个./settings/mocha.js 文件，它以编程方式运行mocha，将参数作为要运行的文件列表传递。可以查看完整文件here；

我创建了一个启动配置，它将./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 测试中使用断点。

【讨论】：

对我不起作用，它找不到测试文件，路径是正确的我也尝试使用完整路径。

这对我也适用 vscode 0.10.6。使用 .ts 文件中的断点和源映射，我确实将 'sourceMaps': true, 'outDir': './build' 添加到我的启动配置中。

【参考方案8】：

如果您在 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"
        

【参考方案9】：

很抱歉添加了另一个答案，但从 VS Code 1.8.1 和其中包含的标准节点调试器开始，之前的答案都没有对我有用。这是我解决它的方法（这里有以前的答案和官方VS Code Node.js Debugging docs的指导）所以只需单击/按键调试：

确保 mocha 安装为 devDependency 在 packages.json: "devDependencies": "mocha": "^3.2", ... 在package.json 的目录中运行npm install 以确保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 测试”，这有助于简化上述大部分内容。您仍然需要确保 mocha 在您的 node_modules 中，并且可能需要更新 cwd 和最后一个 runtimeArgs（这是查找测试的模式）以指向适当的路径。但是一旦你设置了这两个属性，它应该可以从那里开始工作。

【参考方案10】：

在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"
    ,

【参考方案11】：

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

【参考方案12】：

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

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

【参考方案13】：

这适用于我在 Windows 7 机器上。我确实全局安装了 mocha，但是此配置指向项目安装以避免需要用户配置文件路径（顺便说一句，我尝试使用 %USERPROFILE% 变量但没有成功）。我现在可以在我的 mocha 测试中设置断点。耶！

        "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"
    

【参考方案14】：

对于那些使用 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');;

【参考方案15】：

在 VSCode 版本 1.13.0 (macOS) 中，他们在配置下内置了它 -> Mocha Tests。

【讨论】：

在 Windows 中相同。

【参考方案16】：

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

【参考方案17】：

Github 官方microsoft/vscode-recipes 有这个launch.json 用于调试mocha 测试（更多mocha 测试配置进入链接）：

  "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"
        ]
    
  ]

【参考方案18】：

使用 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"
    ]

这里要注意的重要一点是生成了source maps，并且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

调试

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

【参考方案19】：

这是来自 Microsoft 的 launch configuration (launch.json) 示例，它与 Mocha 配合使用并允许使用调试器。

另外，还有一个description 说明如何使用 --debug-brk 选项。

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

【参考方案20】：

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

例如，我使用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中。

【参考方案21】：

最简单的解决方案

将以下代码添加到 .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"
            ],