在 Vue.js 和 VSCode 中调试 Mocha 单元测试的配置

Question

我目前在使用 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 的编译有关，但我到目前为止无法完成这项工作。

Answer 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 配置，这样如果你在测试中，你可以将你的开发工具更改为不会像 "cheap-module-eval-source".

那样转换你的代码的工具。

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

Answer 2

根据环境将 webpack 配置为条件行为。这在文档 Working with Webpack 和模式和环境变量中进行了描述个 Vue CLI。

对于 vue-cli-service test:unit 使用的 test-mode，改变 devtool 以不转译代码，例如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
    }
  ]
}

在 Vue.js 和 VSCode 中调试 Mocha 单元测试的配置

Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode

debugging

mocha.js

webpack

vue.js

visual-studio-code