如何在create-react-app上调试jest单元测试？
Asa*_*atz 10 debugging jestjs create-react-app
我使用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单元测试的正确方法是什么？
小智 6
我也使用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.这应该是项目根目录的位置.
此外,在进入我的测试之前,抛出了与我的代码无关的错误.为了解决这个问题,我必须转到断点下的调试器选项卡,并取消选中"uncaught exceptions"和"module.js".
在我完成这些步骤之后,我现在能够调试我的单元测试,在它们中设置断点等,但它仍然不能像我想的那样工作.例如,它在终端中运行一个额外的命令行,还有其他一些小问题.但它确实能够很好地完成工作.
- 为我工作！此外，如果您使用的是 Typescript，请将 runtimeExecutable 行中的“react-scripts”更改为“react-scripts-ts”。 (2认同)
如果您使用的是visual studio代码,则可以使用以下配置.希望这能节省几个小时.
我的设置:
- Un-ejected create-react-app(1.3.1)项目
- 节点版本:v6.10.3
- Npm版本:4.6.1
为了得到这个工作我还需要安装开玩笑文件和笑话CSS的使用npm i --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}"
}
]
}
说明
--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"
}
与 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。