如何在Visual studio Code 中调试 Vue Test Utils

有一个基于vue 2.6 , vue-cli 3.0 的项目，那么在项目中写unit test的时候，如何使用 vs code进行调试呢？

参考外网链接

首先，vs code debug unit test 是不需要安装任何的外部插件的，在左边有一个播放按钮被小虫子压住左下角的那个图标，就是debug图标，点击就可以进入debug界面。
默认是这个样子的，点击 create a launch.json, 创建一个配置文件

这是我的配置文件内容, 完整复制，替换刚刚创建的launch.json全部内容。
注意 configurations下面runtimeArgs字段，vue-cli-service.js 的地址要使用绝对路径，由于我是在mac电脑上配置的，Windows下请多尝试一下路径格式。

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "vscode-unit-tests for vue",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "绝对路径到vue-cli-service/vue-cli-service.js",
        "test:unit",
        "${file}",
        "--runInBand"
      ],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "disableOptimisticBPs": true,
      "console": "integratedTerminal",    
      "internalConsoleOptions": "neverOpen",
      "outFiles": [ "${workspaceFolder}/src/**/*.js"],
      "port": 9229
    },
  ]
}

其他参数要参考package.json里面的配置，比如我项目内的配置

 "test:unit": "vue-cli-service test:unit --coverage",

runtimeArgs 如果不配置 ${file}, 那么每次点击按钮会将项目内全部测试跑完
以前跑unit test需要在终端里面敲命令

yarn unit:test

或者

npm run test:unit filepath

配置好之后，在vs code内打开一个测试文件，点击图中红框中的部分，就可以测试当前打开的文件。如果打上断点，就可以利用IDE的工具进行debug了，这比每次命令行看打console.log的结果不知道方便多少

这个样子的：