Debugging 如何调试CreateReact应用程序上的jest单元测试？

我使用CreateReact应用程序，我想调试我的单元测试

如图所示，可以使用以下命令进行调试：

node --debug-brk --inspect ./node_modules/.bin/jest -i [any other arguments here]

不幸的是，它不适用于createreact应用程序。 我得到了这个错误：

node --debug-brk --inspect ./node_modules/.bin/jest -i
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node
Debugger attached.
module.js:457
    throw err;
    ^

Error: Cannot find module '/Users/asafkatz/dev/newmaps/node_modules/.bin/jest'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Timeout.Module.runMain [as _onTimeout] (module.js:590:10)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)
Waiting for the debugger to disconnect...

---

在create react app上调试jest单元测试的正确方法是什么？

create react app

将其节点模块（因此jest）放置在不同的位置。试试这个：

node--debug brk--inspect./node\u modules/react scripts/node\u modules/.bin/jest-i

---

如果这不起作用，只需在项目文件夹中搜索名为

jest

的文件并更新路径。

与Chrome DevTools一起运行

jest

似乎有问题（请参阅）

问题是： 您可以使用前面提到的命令行，使用新的

v8inspector

协议启动节点调试器（调整

jest

路径）：

意思是：

# node params
--debug-brk: start debugger, expose external interface, and break at the first line
--inspect: use the new V8 Inspector protocol in the debugger

# jest params
--runInBand: do not fork (make it debuggable)

然后你可以使用谷歌浏览器，连接到给定的URL，或者使用它自动为你做

不幸的是，到目前为止，

调试器调用

解决办法
为了解决这个问题，现在，您可以下载与纯
V8
协议兼容的GUI调试器，例如。要使用它，必须在不使用
--inspect
标志的情况下启动节点调试器：

node --debug-brk ./node_modules/.bin/jest --runInBand

然后，您可以从VCS导航到项目文件夹，进入调试部分，创建标准调试配置，并运行
附加到进程
配置。
如果您使用的是visual studio代码，则可以使用以下配置。希望这能节省一些时间

我的设置：


未弹出的create react应用程序（1.3.1）项目
节点版本：v6.10.3
Npm版本：4.6.1

为了实现这一点，我还需要安装并使用
npmi--save dev jest file jest css
。它们被用作文件转换器，以便jest不会抱怨文件的导入，例如svg

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Test with debugger",
      "type": "node",
      "request": "launch",
      "port": 5858,
      "runtimeArgs": [
        "--debug-brk",
        "--nolazy"
      ],
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "--runInBand",
        "--transform={\"^.+\\\\.(js|jsx)$\": \"babel-jest\",\"^.+\\\\.css$\": \"jest-css\",\"^(?!.*\\\\.(js|jsx|css|json)$)\": \"jest-file\"}"
      ],
      "cwd": "${workspaceRoot}"
    }
  ]
}

解释

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Test with debugger",
      "type": "node",
      "request": "launch",
      "port": 5858,
      "runtimeArgs": [
        "--debug-brk",
        "--nolazy"
      ],
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "--runInBand",
        "--transform={\"^.+\\\\.(js|jsx)$\": \"babel-jest\",\"^.+\\\\.css$\": \"jest-css\",\"^(?!.*\\\\.(js|jsx|css|json)$)\": \"jest-file\"}"
      ],
      "cwd": "${workspaceRoot}"
    }
  ]
}

--nolazy：完全编译代码，以便正确使用断点

--runInBand：停止Jest在工作进程中生成测试

--转换：导入svg等文件时停止错误。如果将其添加到package.json，react脚本将不允许您运行
npm测试
，因为它不支持覆盖转换选项

需要将以下行添加到package.json或.babelrc

"babel": {
  "sourceMaps": "inline",
  "presets": [
    "react-app"
  ]
}

解释

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Test with debugger",
      "type": "node",
      "request": "launch",
      "port": 5858,
      "runtimeArgs": [
        "--debug-brk",
        "--nolazy"
      ],
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "--runInBand",
        "--transform={\"^.+\\\\.(js|jsx)$\": \"babel-jest\",\"^.+\\\\.css$\": \"jest-css\",\"^(?!.*\\\\.(js|jsx|css|json)$)\": \"jest-file\"}"
      ],
      "cwd": "${workspaceRoot}"
    }
  ]
}

sourceMaps：这必须是“内联”或“两者”。如果不设置此选项，则在调试测试时，将看到传输的代码而不是源代码

预设：
react app
是创建react app项目的默认预设。如果您在package.json或.babelrc中都不包含这一点，您将得到错误，因为jest不知道如何处理jsx

结果

如果未使用visual studio代码，则可以运行以下命令，并使用另一个GUI调试器连接到调试会话：
node--debug brk./node_modules/jest/bin/jest.js--runInBand--config=./jest config.json
。只需确保将以下配置放入
jest config.json
文件中：

"transform": {
  "^.+\\.(js|jsx)$": "babel-jest",
  "^.+\\.css$": "jest-css",
  "^(?!.*\\.(js|jsx|css|json)$)": "jest-file"
}

我也使用VSCode，2018年，上述配置对我不起作用。最后，我在launch.json中使用了以下配置，让它开始工作：

 {
        "name": "Debug CRA Tests",
        "type": "node",
        "request": "launch",
        "port":9229,
        "runtimeExecutable": "${workspaceRoot}/main/node_modules/.bin/react-scripts",
        "runtimeArgs": [
          "--inspect-brk",
          "test"
        ],
        "args": [
          "--runInBand",
          "--no-cache",
          "--env=jsdom"
        ],
        "cwd": "${workspaceRoot}/main",
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      },

请注意，我在workspaceRoot值后面有/main，这可能与您不同，因为我的项目名为main。这应该是项目根目录的位置

此外，与我的代码无关的错误在进入我的测试之前被抛出。为了解决这个问题，我必须转到断点下的调试器选项卡，取消选中“未捕获异常”和“module.js”

完成这些步骤后，我现在可以调试单元测试，在其中设置断点，等等，但它仍然不能像我希望的那样工作。例如，它在终端中运行一个额外的命令行，还有其他一些轻微的奇怪之处。但是它确实可以很好地完成任务。
也许您没有在本地安装jest，请尝试“node--debug brk--inspect$（哪一个jest）-i”，它最初似乎在开发工具中正确加载，但在挂起“等待调试器断开连接…”即使执行是免费的，但并不理解JSX:`Unexpected token（8:18）6 |它（“呈现而不崩溃”，（）=>{7 | const div=document.createElement（“div”）；>8 | ReactDOM.render（，div）；^9 |）`@sylvain请看我的下面，它显示了如何解决这个问题为我工作！另外，如果您使用的是Typescript，请将runtimeExecutable行中的“react scripts”更改为“react scripts ts”。您到底是如何执行测试的？您是使用了debbuger标志还是使用了vscode断点？我把它们放在一个jest文件中，使用您提供的配置按f5键，所有测试似乎都通过了，但在断点上不会停止