vue3源码单元测试.png

前言

最近在学习Vue3的源码，但是通过单元测试debug时，vscode控制台一直报错，最后也是通过网络搜索，发现一个兄弟也遇到了同样的问题，于是看了下他的思路，特此留下记号！！！

问题

源码clone下来之后，它自带可以debug的launch.json文件(位置：.vscode/launch.json)，任意找一个单测文件，我这里使用的是packages/vue/__tests__/index.spec.ts这个文件，然后打一个端点，如图所示：

接着点击debug模式

运行之后会报错，如图所示：

解决

看了launch.json的配置，发现有一个参数读取jest的路径不对，可能与安装依赖的方式有关吧，我使用的pnpm，然后修改了一下，就可以了，如下：将"program": "${workspaceFolder}/node_modules/.bin/jest"修改为："program": "${workspaceFolder}/node_modules/jest/bin/jest"

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Jest",
      "type": "node",
      "request": "launch",
     // "program": "${workspaceFolder}/node_modules/.bin/jest",
      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      "stopOnEntry": false,
      "args": ["${fileBasename}", "--runInBand", "--detectOpenHandles"],
      "cwd": "${workspaceFolder}",
      "preLaunchTask": null,
      "runtimeExecutable": null,
      "runtimeArgs": ["--nolazy"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "sourceMaps": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      }
    }
  ]
}

至此，就可以正常调试了～～～

Vue3源码调试-单元测试debug

前言

问题

解决