使用 VSCode 在 Vue.js 中调试 Mocha 单元测试的配置答案

【问题标题】：Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode使用 VSCode 在 Vue.js 中调试 Mocha 单元测试的配置
【发布时间】：2019-11-25 14:06:36
【问题描述】：

我目前在使用 Vue.js 中的 VSCode 正确调试我的测试时遇到了一些问题（我使用的是 Mocha 和 Webpack）

我发现的第一个让我更接近的配置是这个。

.vscode/launch.json 中的配置

{
        "type": "node",
        "request": "launch",
        "name": "Unit Tests",
        "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
        "args": [          
          "test:unit"                    
        ],
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
}

现在这个解决方案确实附加了，但问题是它只是在 vue-cli-service.js (node_modules/@vue/cli-service/bin/vue-cli-service.js) 中调试。我在这里尝试了很多，但没有靠近。所以我想我自己写一个配置，因为 Vue 只是使用 Webpack 和 Mocha，这应该是可能的。现在我离实际可用的版本更近了，但仍然没有。现在这是我的配置

.vscode/launch.json 中的配置

{
        "name": "Run mocha-webpack",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/node_modules/mocha-webpack/bin/mocha-webpack",
        "args": [
            "--debug-brk", "5858",
            "--timeout", "120000",            
            "--require", "node_modules/@vue/cli-plugin-unit-mocha/setup.js",
            "--webpack-config", "node_modules/@vue/cli-service/webpack.config.js",
            "tests"
        ],
        "sourceMapPathOverrides": {
          "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
          "webpack:///./*": "${workspaceRoot}/*",
          "webpack:///*": "*"
        },
        "stopOnEntry": false,
        "sourceMaps": true,
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
        ],
        "env": { "NODE_ENV": "test"},
        "console": "integratedTerminal",
        "outFiles": []
}

现在这让我更近了一步。我现在至少可以在我的代码中设置一个调试器语句，调试器就会停在那里。但是它仍然不会对我使用 VSCode 设置的断点做出反应。我想这必须与代码和 sourceMapping 的编译有关，但到目前为止我无法完成这项工作。

【问题讨论】：

标签： vue.js debugging webpack visual-studio-code mocha.js

【解决方案1】：

好的，所以 TLDR

vue.config.js

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

launch.json

{
      "type": "node",
      "request": "launch",
      "name": "Run Unit Tests",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
      "port": 9229
}

您要做的是链接 webpack 配置，以便在测试时将您的 devtool 更改为不会转译您的代码的工具，如“cheap-module-eval-source”。

感谢 rustyx 在 GitHub 上指出这一点。

【讨论】：

【解决方案2】：

根据环境将 webpack 配置为条件行为。这在 Vue CLI 的文档 Working with Webpack 和 Modes and Environment Variables 中有描述。

对于vue-cli-service test:unit 使用的test 模式，改变开发工具以不转译代码，例如cheap-module-eval-source 或 eval-source-map。

vue.config.js

module.exports = {
  configureWebpack: config => {
    if ((process.env.NODE_ENV === 'development') || (process.env.NODE_ENV === 'production')) {
      config.devtool = 'source-map'
    }
    else if (process.env.NODE_ENV === 'test') {
      config.devtool = 'cheap-module-eval-source-map'
    }
  }  
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "test:unit debug",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--inspect-brk", "--timeout", "900000"],
      "port": 9229
    }
  ]
}

【讨论】：