react 通过react的jest测试用例 debugger

393 阅读1分钟

react

参考链接:juejin.cn/post/1 在react的根目录下面,配置vscode的launch.json

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest all File",
      // 启动路径,启动jest,因为react在根目录下装了jest,在各个packages的并没有,所以必须放在根目录下面。
      "program": "${workspaceRoot}/node_modules/jest/bin/jest",
      // 参数,copy的react的debug-test的参数
      "args": [
        "babel-register",
        "${file}",
        "--config",
        "./scripts/jest/config.source.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

然后直接可以在react的源码里边写的测试用例下面直接调试。

例子

比如打开 code packages/react-dom/src/tests/ReactComponent-test.js 在里边打上断点

image.png
直接点击vscode的调试就可以了
image.png