用Vue.js调试Mocha单元测试的VSCode配置

Question

我目前面临一些问题，让我的测试用VSCode在Vue.js中进行适当的调试(我正在使用Mocha和Webpack)

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

..vscode/unch.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/unch.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配置，以便如果您正在测试，您将您的devtool转换为一个不像“廉价模块-”的代码。

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

Answer 2

根据环境将webpack配置为有条件的行为。这在文档与Webpack合作和模式与环境变量 of Vue CLI中进行了描述。

对于test-mode (由vue-cli-service test:unit使用)，可以对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
    }
  ]
}