Question

我使用 create-react-app ，我想调试我的单元测试

为Jest documentation says，可以使用以下命令进行调试：

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

不幸的是，它不适用于create-react-app。我得到了这个错误：

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 unit test的正确方法是什么？

Answer 1

我也使用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。这应该是项目根目录的位置。

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

在我完成这些步骤之后，我现在能够调试我的单元测试，在它们中设置断点等，但它仍然不能像我想的那样工作。例如，它在终端中运行一个额外的命令行，还有其他一些小问题。但它确实能够很好地完成工作。

Answer 2

如果您使用的是visual studio代码，则可以使用以下配置。希望这能节省几个小时。

我的设置：

Un-ejected create-react-app（1.3.1）项目
节点版本： v6.10.3
Npm版本：4.6.1

为了实现这一目标，我还需要使用npm i --save-dev jest-file jest-css安装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}"
    }
  ]
}

<强>解释

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

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

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

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

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

<强>解释

sourceMaps：这必须是“内联”或“两者”。如果您没有设置此项，那么在调试测试时，您将看到已编译的代码而不是源代码。

预设：react-app是create-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"
}

Answer 3

与Chrome DevTools一起运行jest似乎有问题（请参阅this issue）。

问题：

您可以使用上述命令行使用新的V8 Inspector协议启动节点调试器（调整jest路径）：

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

含义：

# 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)

然后，您可以使用Google Chrome并连接到指定的网址，或使用this useful extension自动为您执行此操作。

不幸的是，截至目前，测试代码中的debugger;调用将不予考虑。

解决方法

要解决此问题，目前，您可以下载与V8协议等普通--inspect协议兼容的GUI调试器。为了使用它，您必须在没有node --debug-brk ./node_modules/.bin/jest --runInBand标志的情况下启动节点调试器：

Attach to Process

然后从VCS导航到项目文件夹，进入调试部分，创建标准调试配置，然后运行FList := TObjectList<TIstruzione>.Create;配置。

Answer 4

create-react-app将其node_modules（因此也就是jest）放在不同的位置。试试这个：

node --debug-brk --inspect ./node_modules/react-scripts/node_modules/.bin/jest -i

如果这不起作用，只需在项目的文件夹中搜索名为jest的文件并更新路径。

如何在create-react-app上调试jest单元测试？

4 个答案:

问题：

解决方法