时间戳

首页 > 解决方案 > 如何在 VSCode 的 vue 应用程序中调试 mocha 单元测试？

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

问题描述

我有一个使用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

  1. 我切换到VSCode 上的Run 选项卡并单击create a 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"
    }
  ]
}
  1. 我还按照线程中的建议添加了vue.config.js：
module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "test") {
      config.merge({
        devtool: "cheap-module-eval-source-map",
      });
    }
  },
};
  1. 最后，我在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) 以确保它没有损坏，但没关系。

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

标签： unit-testingvue.jsvisual-studio-codemocha.js

解决方案

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

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（感谢这个线程）：

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;指令。

推荐阅读