Question

我有一个 vue应用程序，其中包含使用 unit-mocha 进行的单元测试。测试运行正常，但是我无法使用VSCode调试器进行调试。

这是我所做的：

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

damping check failed

然后，我添加了 unit-mocha ：

vue create hello-world

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

cd hello-world
vue add unit-mocha

我进行了测试：

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)
  })
})

这很好用。

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

因此，我基于此线程执行了以下操作：Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode

我在VSCode上切换到“运行”选项卡，并单击了创建launch.json文件：

npm run test:unit

我还根据线程中的建议添加了 vue.config.js ：

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

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

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

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

然后我尝试重新运行测试（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），以确保它没有损坏但没问题。

有人可以告诉我我在做什么错吗？

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

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

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单元测试？

2 个答案: