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

Question

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

这是我所做的：

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

vue create hello-world

1. 然后，我添加了 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)
  })
})

1. 我运行了测试：

npm run test:unit

这很好用。

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

所以我根据这个帖子做了以下操作：Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode

4. 我在 VSCode 上切换到 Run 选项卡，然后点击 create a launch.json file：

{
  // 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"
    }
  ]
}

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

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

6. 最后我在 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

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

然后我尝试重新运行测试 (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; 指令。