vue3单元测试debug

环境

• nvm 切换node版本(brew安装)
• node 14.19.2、node 18.12.1
• pnpm 包管理器
• 依赖：
  • "@types/jest": "27.4.0"
  • "@types/node": "^18.11.9",、
  • "jest": "24.8.0"
  • "typescript": "^4.8.4"
• 工具
  • vscode
  • jest插件(方便debug)

解决问题

最近开始看vue3源码， 首先看reactivity目录下的响应式模块，从reactive.spec.ts入手调试梳理逻辑，点击debug就报错：

core %  /usr/bin/env 'NODE_OPTIONS=--require "/Applications/Visual Studio Code.app/Con
tents/Resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js" --inspect-publish-uid=http' 'VSCODE_INSPECTOR_O
PTIONS={"inspectorIpc":"/var/folders/vh/1nwmdc712csgrn75kbcjkgnm0000gn/T/node-cdp.2076-1.sock","deferredMode":false,"waitFo
rDebugger":"","execPath":"/Users/.nvm/versions/node/v14.19.2/bin/node","onlyEntrypoint":false,"autoAttachMode":
"always","fileCallback":"/var/folders/vh/1nwmdc712csgrn75kbcjkgnm0000gn/T/node-debug-callback-d33de5f79b0f60e6"}' /Users/.nvm/versions/node/v14.19.2/bin/node ./node_modules/.bin/jest --runInBand --watchAll=false --testNamePattern Obje
ct --runTestsByPath /Users/lib/core/packages/reactivity/__tests__/reactive.spec.ts 
Debugger attached.
Waiting for the debugger to disconnect...
/Users/lib/core/node_modules/.bin/jest:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')");
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
    at internal/main/run_main_module.js:17:47

把整个工程的单元测试都跑一下，运行pnpm run test, 第一个行就会有警告，表示当前node版本太低，等待单测跑完，一部分的测试用例都没有过，先升级最新稳定版的node@18.12.1

升级node

mac使用nvm切换node命令：nvm alias default v18.12.1, 然后重启电脑，就会生效，不然只会在当前终端tab中生效。

升级完成之后，测试用例全过

继续使用debug调试reactive的测试用例，结果还是一样报错。

单测都全过了，debug会报错，那估计是vscode配置问题，验证想使用webstrom进行debug就成功了。

于是回到vscode,修改.vscode/launch.json默认配置(适用于npm包管理器)。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "vscode-jest-tests.v2",
      "request": "launch",
      "args": [
        "--runInBand",
        "--watchAll=false",
        "--testNamePattern",
        "${jest.testNamePattern}",
        "--runTestsByPath",
        "${jest.testFile}"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
      }
    }
  ]
}

替换成这个，用来专门调试monorepo项目

{
      
  "type": "node",
  "name": "pnpm Jest Debug",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true,
  "request": "launch",
  "protocol": "inspector",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest",
  "stopOnEntry": false,
  "args": ["--runInBand", "--env=jsdom", "${fileBasename}"],
  "runtimeArgs": ["--inspect-brk"],
  "cwd": "${workspaceRoot}",
  "sourceMaps": true,
  "windows": {
    "program": "${workspaceFolder}/node_modules/jest/bin/jest"
  }
},

如果使用jest插件的debug还是会报错，这时候就需要选择终端旁边的调试控制台，把debug的setting的name字段改成调试控制台生成的名字就行。

插曲

点击jest插件的debug报错的时候，看报错信息，点进去看.bin/jest文件，以为系统环境变量有问题或者node的问题。

于是搞了yarn和pnpm demo测试，pnpm还是一样的报错，yarn demo就通过了。

然后对比一下两个工程的执行命令文件(.bin/jest),发现并没有错，pnpm使用的确实是软连接，node版本也是最高，jest官网上说明高版本jest支持。

那就肯定是vscode的.vscode/launch.json配置文件的问题了。