如何在 VSCode 中的 vue 应用程序中调试 mocha 单元测试？

Question

我有一个 vue 应用程序，使用 unit-mocha 进行单元测试。测试运行很好，但我无法使用 VSCode 调试器调试它们。

这是我所做的：

首先，我在VSCode中创建了一个vue应用：

vue create hello-world

然后，我添加了unit-mocha:

cd hello-world
vue add unit-mocha

这会生成文件 tests/unit/example.spec.js:

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })
})

我运行测试：

npm run test:unit

这很好用。

但是现在，我想在文件和运行调试器中添加断点。

所以我根据这个线程做了以下操作：

我在 VSCode 上切换到 运行选项卡 并单击 创建 launch.json 文件 :

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Unit Tests",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
      "port": 9229,
      "console": "integratedTerminal"
    }
  ]
}

我还按照帖子中的建议添加了vue.config.js：

module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "test") {
      config.merge({
        devtool: "cheap-module-eval-source-map",
      });
    }
  },
};

最后，我在 example.spec.js 的第一条语句上设置了一个断点。并单击 开始调试 （选择“调试单元测试”）。我在终端控制台中有以下输出：

Debugger listening on ws://127.0.0.1:53241/2faf3b6b-dd6f-476a-80bc-51b99df90ec3
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Debugger listening on ws://127.0.0.1:9229/ad9ccf9a-9e2c-4ed9-a379-3e942c68d185
For help, see: https://nodejs.org/en/docs/inspector

调试器似乎启动了（甚至两次？？）但测试代码没有执行。我的断点没有命中（它变成灰色并显示“Unbound breakpiont”）。然后我停止了调试器。

然后我再次尝试重新运行测试 (npm run test:unit) 以确保它没有损坏，但没问题。

谁能告诉我我做错了什么？

Answer 1

它并不完美，但似乎对我有用，可以找到更多详细信息@https://nodejs.org/en/docs/guides/debugging-getting-started/ 但是 launch.json 配置应该是这样的

     {
        "name": "TestBreak",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npx",
        "console": "integratedTerminal",
        "runtimeArgs": [
          "vue-cli-service",
          "test:unit",
          "--inspect-brk"
        ],
      }

我遇到了断点。但是我必须添加这样的调试器语句

debugger; // eslint-disable-line no-debugger

由于一些未知的 linter，我需要评论。

Answer 2

我终于找到了我一直在寻找的解决方案：

launch.json（感谢OmegaOdie）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Unit Tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npx",
      "console": "integratedTerminal",
      "runtimeArgs": ["vue-cli-service", "test:unit", "--inspect-brk"]
    }
  ]
}

vue.config.json（感谢this thread）：

module.exports = {
  devServer: {
    ...
  },
  // should be false for production
  productionSourceMap: true,
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "test") {
      // if unit testing, keep original lines to make breakpoints in original source files work
      config.merge({
        devtool: "cheap-module-eval-source-map",
      });
    } else {
      // if not unit testing, use normal source maps
      config.merge({
        devtool: "source-map",
      });
    }
  },
};

使用此配置，无需 debugger; 断点指令即可工作。

如何在 VSCode 中的 vue 应用程序中调试 mocha 单元测试？

How to debug mocha unit tests in a vue application in VSCode?

unit-testing

mocha.js

vue.js

visual-studio-code