如何使用 Visual Studio Code 中的 Mocha 调试 Typescript 编写的单元测试答案

【问题标题】：How to debug unit tests written in Typescript with Mocha from Visual Studio Code如何使用 Visual Studio Code 中的 Mocha 调试 Typescript 编写的单元测试
【发布时间】：2017-08-18 06:00:22
【问题描述】：

我编写了一个 Typescript 库。单元测试也是使用 Mocha 框架用 Typescript 编写的。我想直接执行单元测试而不编译成javascript。这适用于以下命令：

./node_modules/mocha/bin/mocha  ./test/*.test.ts  --require ts-node/register

我尝试使用以下启动设置从 Visual Studio Code 调试单元测试：

{
    "type": "node",
    "request": "launch",
    "name": "Mocha Tests",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": [
        "--require",
        "ts-node/register",
        "${workspaceRoot}/test/*.test.ts"
    ],
    "internalConsoleOptions": "openOnSessionStart"
}

这样我可以从 VS Code 调试 Mocha 本身，但不能调试单元测试。 Mocha 为测试生成单独的进程，调试器无法自动附加到子进程。

从 Visual Studio Code 调试 Typescript 单元测试的正确方法是什么？

【问题讨论】：

标签： unit-testing typescript mocha.js visual-studio-code

【解决方案1】：

如果有人觉得它有用，下面的launch.json 配置 sn-p 对我有用，没有任何解决方法：

    {
    "name": "mocha tests",
    "type": "node",
    "protocol" : "inspector",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "stopOnEntry": false,
    "args": [ "--compilers", "ts:ts-node/register", "--no-timeouts", "${relativeFile}"],
    "cwd": "${workspaceRoot}"
    }

使用 node v7.10.0、typescript 2.4.0 和 Visual Studio Code 1.13.1 对我来说效果很好。 mocha和typescript都安装在本地node_modules下。

【讨论】：

【解决方案2】：

将此线程更新为对我们有用的配置（自我说明）。

https://stackoverflow.com/a/44999572/147530 中的 --compilers 选项已弃用
ts:ts-node/register 报错
添加“${relativeFile}”也会在位置 6 处的 JSON 中出现错误 Unexpected token /，因为“${relativeFile}”解析为 .vscode/launch.json。

更新配置

{            
            "name": "mocha tests",
            "type": "node",
            "protocol": "inspector",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "stopOnEntry": false,
            "args": [ "-r", "ts-node/register", "${workspaceRoot}/test/**/*.spec.ts", "--no-timeouts"],
            "cwd": "${workspaceRoot}"
}

【讨论】：

【解决方案3】：

tl;博士：使用Nodejs debugger command

虽然我不是 100% 满意，但我找到了解决问题的方法/解决方法。

通过将--require ts-node/register 切换到Mocha，我们基本上将ts-node/register.js 库注入到我们的测试环境中。这个库包装了 require 调用，当加载 .ts 文件时，它会按需编译 typescript 代码。

为了测试 ts-node/register 的工作原理，我编写了一个没有 Mocha 的简单 Nodejs 示例。示例中有一个debug_test.js 文件和一个debug_test.ts 文件。我启动 debug_test.js 并加载 debug_test.ts 。

我从 Vissual Studio Code 中的一个简单的“Node.js：启动程序”配置开始示例。

当我在debug_test.ts:2 设置断点时，问题与我原来的问题相同 - 它不会中断。

但是，如果我使用 Nodejs debugger 命令它会中断，我可以调试我的应用程序。

当我在debugger 命令上设置断点时，Visual Studio Code 会识别调用堆栈，调试控制台可用，尽管我在 UI 上看不到局部变量。

这似乎是一个 VS Code 错误或改进机会，但现在这个解决方案也适用于 Mocha 和我原来的启动配置。

【讨论】：

【解决方案4】：

在我在 Mac 上运行的 VsCode v1.43 上，我使用了以下配置。此外，我在 package.json 中使用 npm test 目标来调用测试，因此您可以在此处看到它作为参数传递，以及其他自定义测试参数。

{
            "type": "node",
            "request": "launch",
            "name": "Mocha_TypeScript_Debugger",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "runtimeExecutable": "/usr/local/bin/node",
            "args": [
                "--require", "ts-node/register",
                "npm",
                "test",
                "--timeout", 
                "130000",
                "${workspaceFolder}/src/**/${fileBasenameNoExtension}.ts",
                "yourCustomArgs",
                "{\"dc\":\"dubaDc\",\"comp\":\"dummy\", \"login\":\"dubakur\", \"id\":\"adkd\"}"
            ],
            "internalConsoleOptions": "openOnSessionStart",
             "openDebug": "openOnDebugBreak",
             "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/lib/**/*.js"
            ]
}

【讨论】：