如何在 create-react-app 上调试 jest 单元测试?
Posted
技术标签:
【中文标题】如何在 create-react-app 上调试 jest 单元测试?【英文标题】:how to debug jest unit tests on create-react-app? 【发布时间】:2017-02-09 10:38:52 【问题描述】:我使用 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 单元测试的正确方法是什么?
【问题讨论】:
可能你本地没有安装 jest,试试 'node --debug-brk --inspect $(which jest) -i' 【参考方案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。这应该是您的项目根目录的位置。
此外,在进行我的测试之前,与我的代码无关的错误被抛出。为了解决这个问题,我不得不转到断点下的调试器选项卡,并取消选中“未捕获的异常”和“module.js”。
完成这些步骤后,我现在可以调试我的单元测试、在其中设置断点等,但它仍然无法正常工作。例如,它在终端中运行了一个额外的命令行,并且还有其他一些轻微的奇怪之处。但它确实可以很好地完成工作。
【讨论】:
为我工作!此外,如果您使用的是 Typescript,请在 runtimeExecutable 行中将“react-scripts”更改为“react-scripts-ts”。 您是如何准确执行测试的?你是使用调试器标志还是使用 vscode 断点?我把一堆放在一个 jest 文件中,我使用你提供的配置按 f5,所有测试似乎都通过了,但它并没有在断点处停止【参考方案2】:如果您使用的是 Visual Studio 代码,则可以使用以下配置。希望这可以为某人节省几个小时。
我的设置:
未弹出的 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:这必须是“inline”或“both”。如果你不设置这个,当你调试你的测试时,你会看到转译的代码而不是你的源代码。
预设: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"
【讨论】:
【参考方案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 并连接到给定的 URL 或使用 this useful extension 自动为您完成。
很遗憾,目前测试代码中的debugger;
调用不会被考虑在内。
解决方法
要解决此问题,目前,您可以下载与普通 V8
protocol 兼容的 GUI 调试器,例如 Visual Studio Code。为了使用它,您必须在没有--inspect
标志的情况下启动节点调试器:
node --debug-brk ./node_modules/.bin/jest --runInBand
然后您可以从 VCS 导航到项目文件夹,进入调试部分,创建标准调试配置,然后运行 Attach to Process
配置。
【讨论】:
【参考方案4】: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
【讨论】:
【参考方案5】:create-react-app
将它的 node_modules(因此开玩笑)放在不同的位置。试试这个:
node --debug-brk --inspect ./node_modules/react-scripts/node_modules/.bin/jest -i
如果这不起作用,只需在项目文件夹中搜索名为 jest
的文件并更新路径即可。
【讨论】:
对我来说,最初似乎在开发工具中正确加载,但即使执行是免费的,也会挂起“等待调试器断开连接...”。 工作但不理解 JSX:` 意外令牌 (8:18) 6 | it("渲染不会崩溃", () => 7 | const div = document.createElement("div"); > 8 | ReactDOM.render(, div); | ^ 9 | );` @sylvain 请在下面查看我的answer,它显示了如何解决此问题以上是关于如何在 create-react-app 上调试 jest 单元测试?的主要内容,如果未能解决你的问题,请参考以下文章
如何调试从 create-react-app 创建的应用程序使用的本地打字稿模块
如何在 create-react-app 上使用“/”阻止路由
如何在 Ubuntu 服务器上使用 create-react-app 使用 Webpack/React 配置 Django