vue3单元测试debug


theme: channing-cyan

环境

  • 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就报错:

image.png

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

image.png

升级node

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

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

image.png

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

image.png

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

image.png

于是回到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"
  }
},

image.png

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

image.png

插曲

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

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

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

image.png

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

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容