如何在 vscode 中调试 deno 测试

Question

使用 deno vscode 扩展可以很好地运行测试，但似乎没有调试测试的选项。

请注意，我可以在 vscode 中调试 deno 代码，没有问题。这是调试测试的问题。

Answer 1

我将提供一些步骤和一些示例文件来帮助您重现成功。

\n

在开始之前，以下是需要阅读的相关手册页：

\n

\n

• 在 Visual Studio Code 中调试

  \n
\n

• 调试您的代码 | 手册| 德诺

  \n
\n

• 使用 Visual Studio 代码 | 手册| 德诺

  \n
\n

\n

您还需要确保以下事项：

\n

\n
1. Deno 已安装并可在您的PATH. 我的意思是，VS Code 终端中的 \xe2\x80\x94 \xe2\x80\x94\xc2\xa0 可以键入以下命令并查看版本信息：
\n

\n

> deno --version\ndeno 1.25.0 (release, x86_64-apple-darwin)\nv8 10.6.194.5\ntypescript 4.7.4\n

\n

\n
2. 该vscode_deno扩展已安装并为您的工作区启用。您应该看到.vscode/settings.json如下文件：
\n

\n

> deno --version\ndeno 1.25.0 (release, x86_64-apple-darwin)\nv8 10.6.194.5\ntypescript 4.7.4\n

\n

现在您可以继续：

\n

为了清楚起见：以下是我撰写本文时使用的软件版本：

\n

% deno --version\ndeno 1.25.0 (release, x86_64-apple-darwin)\nv8 10.6.194.5\ntypescript 4.7.4\n\n% code --version\n1.70.2\ne4503b30fc78200f846c62cf8091b76ff5547662\nx64\n\n% code --list-extensions --show-versions | grep "deno"\ndenoland.vscode-deno@3.13.1\n

\n

自定义调试测试运行器配置

\n

\n

.vscode/launch.json在创建文件之前，VS Code 使您能够从提供程序模板生成文件。如果您已经在 处创建了该文件.vscode/launch.json，则您将没有此选项，因此您需要移动/删除现有的启动配置文件（如果您已经创建了该文件）。

\n

\n

\n
1. 从 VS Code 的主侧栏中选择“运行和调试”视图：
\n

\n

\n

\n
2. 如果工作区中没有.vscode/launch.json文件，您将看到默认的开始视图：
\n

\n

\n

\n
3. 选择文本链接“创建 launch.json 文件”。您将看到调试器模板提供程序的列表：
\n

\n

\n

\n
4. 选择“Deno”选项，VS Code 将为您生成一个具有默认选项的启动配置文件。下面我列出了我修改过的配置版本，以及有关修改哪些值及其原因的注释：
\n

\n

.vscode/launch.json：

\n

{\n  "deno.enable": true\n}\n

\n

仅此一项就应该允许您在工作区中调试不需要特定权限的测试。（如果这样做，您需要将它们作为附加运行时参数来代替"--allow-all"。）

\n

请注意，当当前工作目录是您的工作空间时，此配置相当于以下终端命令：

\n

deno test --inspect-brk\n

\n

我将在下面提供一个示例 TypeScript 模块和测试模块，以便这是一个完整的示例（请注意，我只是编写这些示例来为此答案 \xe2\x80\x94 它们不一定是声音的顶峰逻辑和优秀的风格）：

\n

mod.ts：

\n

% deno --version\ndeno 1.25.0 (release, x86_64-apple-darwin)\nv8 10.6.194.5\ntypescript 4.7.4\n\n% code --version\n1.70.2\ne4503b30fc78200f846c62cf8091b76ff5547662\nx64\n\n% code --list-extensions --show-versions | grep "deno"\ndenoland.vscode-deno@3.13.1\n

\n

test.ts：

\n

{\n  // Use IntelliSense to learn about possible attributes.\n  // Hover to view descriptions of existing attributes.\n  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n  "version": "0.2.0",\n  "configurations": [\n    {\n      "request": "launch",\n\n      /* modified: descriptive name */\n      "name": "Debug tests",\n\n      /* modified: was generated as "pwa-node", but VS Code shows me\n      a diagnostic warning for that value: "Please use type node instead(2)" */\n      "type": "node",\n\n      /* disabled specific entrypoint */\n      // "program": "${workspaceFolder}/main.ts",\n\n      "cwd": "${workspaceFolder}",\n\n      /* modified: using deno process name from my PATH */\n      "runtimeExecutable": "deno",\n\n      "runtimeArgs": [\n        /* modified: was generated as "run", but you asked about testing */\n        "test",\n\n        /* modified: was generated as "--inspect", but using this option\n        causes an initial break to wait for the debugger to attach */\n        "--inspect-brk"\n\n        /* disabled: allowing all permissions is unsafe: only allow\n        the specific permissions that your scripts need */\n        // "--allow-all"\n      ],\n      "attachSimplePort": 9229\n    }\n  ]\n}\n\n

\n

运行调试测试配置

\n

现在您已经有了一个完整的示例，您可以运行它：

\n

返回“运行和调试”视图，您应该看到可用的“调试测试”配置：

\n

\n

请注意，我还在模块中的行中添加了一个断点，以便您可以在语句之前检查该模块中的测试程序状态，以便直观地确认断言在执行之前应该成功。25test.tsassertStrictEquals

\n

单击配置名称“调试测试”旁边的绿色三角形图标将开始调试会话并启动 Deno 测试运行器。测试运行程序在初始断点处停止（因为--inspect-brk使用了参数）并等待调试器附加 \xe2\x80\x94\xc2\xa0 ，在短暂的持续时间后，调试器附加，我们看到初始断点：

\n

\n

我们看到断点位于名为colors.ts\xe2\x80\x94 的模块的第一行，之所以将其作为初始断点是因为它是模块图中执行的第一行。在本地test.ts模块中，第一个导入来自https://deno.land/std@0.153.0/testing/asserts.ts. 在该模块的行上11，您可以看到它还导入了另一个模块：https://deno.land/std@0.153.0/fmt/colors.ts。该模块没有导入，该模块中的第一行执行是 line 22，这是我们看到的初始断点的位置。

\n

选择“继续”（窗口顶部中心图标组左侧的蓝色三角形图标）继续到下一个手动设置的断点（25中的行test.ts）：

\n

\n

从这里，您可以像平常一样使用调试器 \xe2\x80\x94 我们看到变量、调用堆栈等。

\n

我们可以在调用之前看到第一次循环迭代中变量的状态assertStrictEquals，并直观地验证调用是否应该成功：

\n

deno test --inspect-brk\n

\n

继续执行在下一次循环迭代时再次中断，我们看到新的变量：

\n

/**\n * Capitalizes the first letter of every word preceded by whitespace or a hyphen\n * (including articles, prepositions, etc.) \xe2\x80\x94 see\n * [Title case on Wikipedia](https://en.wikipedia.org/wiki/Title_case).\n */\nexport function getSimpleTitleCase(input: string): string {\n  const delimiterRegexp = /[\\s-]/;\n  let result = "";\n  let ready = true;\n\n  for (const str of input) {\n    const isDelimiter = delimiterRegexp.test(str);\n\n    if (isDelimiter) {\n      ready = true;\n      result += str;\n      continue;\n    } else if (ready) {\n      result += str.toUpperCase();\n      ready = false;\n      continue;\n    }\n\n    result += str.toLowerCase();\n  }\n\n  return result;\n}\n\n

\n

最后一次显示最后一个测试数据案例变量：

\n

import { assertStrictEquals } from "https://deno.land/std@0.153.0/testing/asserts.ts";\nimport { getSimpleTitleCase } from "./mod.ts";\n\nconst { test } = Deno;\n\ntest("getSimpleTitleCase: smoke test", async ({ step }) => {\n  const testData: Record<"expected" | "input", string>[] = [\n    {\n      expected: "The Last Jedi",\n      input: "the last jedi",\n    },\n    {\n      expected: "My Old-Fashioned Grandparents",\n      input: "my oLd-fAShiOned graNdPAreNTs",\n    },\n    {\n      expected: "Html + Css + Js",\n      input: "HTML + CSS + JS",\n    },\n  ];\n\n  for (const { expected, input } of testData) {\n    await step(`correctly transforms "${expected}"`, () => {\n      const actual = getSimpleTitleCase(input);\n      assertStrictEquals(actual, expected);\n    });\n  }\n});\n\n

\n

此时单击“继续”将完成测试运行程序的执行，因为这是唯一的断点，也是最终的循环迭代。测试运行程序完成后，调试器将分离，并且窗口返回到启动前的状态：

\n

\n\n

\n

对于那些感兴趣的人，上面的屏幕截图中使用的 VS Code 主题的 ID 是hedinne.popping-and-locking-vscode，字体是Fira Code。

\n

\n