react 通过react的jest测试用例 debugger

react

参考链接：https://juejin.im/post/5a6df3ac6fb9a01cb509113b
在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