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

问题描述

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

I am currently facing some problems getting my tests to debug properly with VSCode in Vue.js (I am using Mocha and Webpack)

我发现使我更接近的第一个配置是这个.

The first configuration I found which got me a bit closer was this one.

配置

{
        "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)内进行调试.我在这里尝试了很多，但没有走得更近.所以我以为自己会自己编写一个Configuration，因为Vue只是使用Webpack和Mocha，这应该是可能的.现在，我已经接近了，但仍然没有找到实际可用的版本.现在，这是我的配置

Now this solution did attach but the problem is it was only debuggin inside of the vue-cli-service.js (node_modules/@vue/cli-service/bin/vue-cli-service.js). I tries alot around here but did not came alot closer. So I thought I'd just write a Configuration myself as Vue is just using Webpack and Mocha and this should be possible. Now I got closer but still not to a version that is actually usable. Right now this is the configuration that I have

配置

{
        "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有关，但是到目前为止，我还无法完成这项工作.

Now this got me one step closer. I can now at least set a debugger statement in my code and the debugger will stop there. However it will still not react to Breakpoints I have set using VSCode. I guess this must have to do something with the compilation of the code and the sourceMapping but I am so far unable to make this work.

推荐答案

好的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"之类的代码的工具.

What you want to do is to chain the webpack config so that if you are in testing you change your devtool to one that does not transpile your code like "cheap-module-eval-source".

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

Thanks to rustyx for pointing that out on GitHub.

这篇关于使用VSCode在Vue.js中调试Mocha单元测试的配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！