13

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

正如Jest 文档所说,可以使用以下命令进行调试:

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 单元测试的正确方法是什么?

4

5 回答 5

7

我也使用 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”。

在我完成这些步骤之后,我现在可以调试我的单元测试,在其中设置断点等,但它仍然不能像我想要的那样工作。例如,它在终端中运行了一个额外的命令行,并且还有其他一些奇怪的地方。但它确实可以很好地完成工作。

于 2018-01-31T21:19:05.400 回答
5

如果您使用的是 Visual Studio 代码,则可以使用以下配置。希望这可以节省几个小时。

我的设置:

  • 未弹出的 create-react-app (1.3.1) 项目
  • 节点版本:v6.10.3
  • Npm 版本:4.6.1

为了让它工作,我还需要安装jest-filejest-css使用npm i --save-dev jest-file jest-css. 这些用作文件转换器,因此 jest 不会抱怨文件的导入,例如 svg。

启动.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:这必须是“内联”或“两者”。如果你不设置这个,当你调试你的测试时,你会看到转译的代码而不是你的源代码。

presets: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"
}
于 2017-06-05T12:28:17.473 回答
3

与 Chrome DevTools 一起运行jest似乎有问题(请参阅此问题)。

问题:

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 并连接到给定的 URL,或者使用这个有用的扩展程序自动为您完成。

不幸的是,到目前为止debugger;,测试代码中的调用不会被考虑在内。

解决方法

要解决此问题,目前,您可以下载与普通V8协议(如Visual Studio Code )兼容的 GUI 调试器。为了使用它,您必须在没有--inspect标志的情况下启动节点调试器:

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

然后,您可以从 VCS 导航到项目文件夹,进入调试部分,创建标准调试配置,然后运行Attach to Process配置。

于 2017-01-27T14:04:45.103 回答
1

create react app 文档有关于如何调试测试的文档。

https://create-react-app.dev/docs/debugging-tests/

总之,您所要做的就是将其添加到您的 package.json

"scripts": {
"test:debug": "react-scripts --inspect-brk test --runInBand --no-cache"
}

在您的测试中放置一个debugger;语句并运行

$ npm run test:debug
于 2021-09-06T11:38:28.420 回答
0

create-react-app将其 node_modules(因此开玩笑)放在不同的位置。试试这个:

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

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

于 2016-10-13T13:24:19.657 回答