Create React App 怎么用 Chrome 和 VS Code 调试 Jest 单元测试【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app在 Create React App 项目里排查测试失败、断言输出不符合预期等问题时光看npm test的终端输出往往不够需要在测试执行过程中断点检查变量和调用栈。create-react-app 官方文档给出了两条调试 Jest 单测的路径用 Chrome 的about:inspect附加调试器或用 VS Code 的 Node 调试配置直接启动测试。两种方式都依赖项目里已经通过react-scripts集成 Jest 这一前提——CRA 默认把 Jest 作为测试运行器测试运行在 Node 环境中借助 jsdom 提供window等浏览器全局的近似实现因此调试对象是 Node 进程而不是浏览器标签页。测试文件的位置按 Jest 的命名约定src目录下任意深度的.test.js/.spec.js文件或__tests__文件夹中以.js结尾的文件都会被识别为测试。本文的断点就加在这类文件里。方式一用 Chrome 调试 Jest 测试1. 在 package.json 中添加调试脚本在项目package.json的scripts部分加入scripts: { test:debug: react-scripts --inspect-brk test --runInBand --no-cache }其中--inspect-brk让进程启动后暂停等待调试器附加--runInBand让 Jest 在同一个进程中运行所有测试而不是为每个测试派生独立进程——Jest 默认会跨进程并行运行测试同时调试多个进程很不方便--no-cache禁用缓存。2. 在测试中插入断点并在 Chrome 中附加在要调试的任意测试里放入debugger;语句然后在项目根目录运行$ npm run test:debug执行后 Jest 会开始启动测试但在执行前暂停等待调试器接入。此时在 Chrome 地址栏打开about:inspect打开后 Chrome 会显示 Developer Tools 的远程检查界面。在列表中找到你的测试进程点击对应的inspect断点会被设在 react script 的第一行这是为了给你留出打开开发者工具的时间防止 Jest 在你准备好之前就开始执行。点击界面右上角形如播放按钮的图标继续执行。当 Jest 运行到包含debugger;语句的测试时执行会在此暂停你可以检查当前作用域scope和调用栈call stack。方式二用 VS Code 调试 Jest 测试VS Code 对调试 Jest 测试提供了开箱即用的支持。把下面这份 launch.json 配置写入项目根目录的.vscode/launch.json如果文件已存在其他配置把configurations数组中的Debug CRA Tests这一项合并进去即可{ version: 0.2.0, configurations: [ { name: Debug CRA Tests, type: node, request: launch, runtimeExecutable: ${workspaceRoot}/node_modules/.bin/react-scripts, args: [test, --runInBand, --no-cache, --watchAllfalse], cwd: ${workspaceRoot}, protocol: inspector, console: integratedTerminal, internalConsoleOptions: neverOpen, env: { CI: true }, disableOptimisticBPs: true } ] }配置要点${workspaceRoot}是 VS Code 启动配置中的变量解析为当前打开的工作区根目录runtimeExecutable因此指向项目本地的node_modules/.bin/react-scriptsargs中的--runInBand、--no-cache与 Chrome 方式相同额外的--watchAllfalse关闭测试监视模式配合env: { CI: true }CRA 会强制 Jest 只运行一轮测试就结束进程而不启动交互式 watcherCRA 的测试脚本在设置了CI环境变量或显式传入--watchAllfalse时都会跳过 watch 模式console: integratedTerminal让测试输出打印在集成终端中disableOptimisticBPs: true避免调试器在源代码尚未加载前就乐观地设置断点。然后在 VS Code 中按F5或点击调试面板的启动按钮在断点处即可检查变量与调用栈。如何确认调试环境工作正常两种方式的验证标准一致执行流应当精确停在debugger;语句或你手动设置的断点处而不是在测试文件第一行之后直接跑完全部用例。停住后在调试面板确认能看到当前作用域变量和调用栈再继续执行如果测试按预期通过/失败且断点命中位置正确说明调试链路已经打通。遇到问题时的排查方向进程启动后没有暂停、测试直接跑完确认--inspect-brk是否写进了test:debug脚本Chrome 方式或 VS Code 是否确实走的是上面这份launch配置而不是npm test的 watch 模式--runInBand缺失时 Jest 会派生多个测试进程about:inspect里会出现多个难以对应的条目。npm test在 macOS 上卡住或崩溃如果控制台在打印react-scripts test后就卡住可能是 Watchman 安装的问题。官方文档建议先删除项目中的node_modules并重新npm install或使用 yarn仍不生效时再考虑更新 Watchman 到 4.7.0 或更高版本或参考文档列出的其他 issue 处理方案。调试完单测之后如果你想调试的是浏览器里的应用代码而不是 Jest 进程CRA 的 编辑器调试文档 中另有 VS Code Chrome 的应用调试launch.jsontype: chrome配合npm start使用与本文的 Node 测试调试是两套独立配置不要混用。更多测试运行细节覆盖率、聚焦测试、CI 行为见 running-tests 文档。【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Create React App 怎么用 Chrome 和 VS Code 调试 Jest 单元测试
Create React App 怎么用 Chrome 和 VS Code 调试 Jest 单元测试【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app在 Create React App 项目里排查测试失败、断言输出不符合预期等问题时光看npm test的终端输出往往不够需要在测试执行过程中断点检查变量和调用栈。create-react-app 官方文档给出了两条调试 Jest 单测的路径用 Chrome 的about:inspect附加调试器或用 VS Code 的 Node 调试配置直接启动测试。两种方式都依赖项目里已经通过react-scripts集成 Jest 这一前提——CRA 默认把 Jest 作为测试运行器测试运行在 Node 环境中借助 jsdom 提供window等浏览器全局的近似实现因此调试对象是 Node 进程而不是浏览器标签页。测试文件的位置按 Jest 的命名约定src目录下任意深度的.test.js/.spec.js文件或__tests__文件夹中以.js结尾的文件都会被识别为测试。本文的断点就加在这类文件里。方式一用 Chrome 调试 Jest 测试1. 在 package.json 中添加调试脚本在项目package.json的scripts部分加入scripts: { test:debug: react-scripts --inspect-brk test --runInBand --no-cache }其中--inspect-brk让进程启动后暂停等待调试器附加--runInBand让 Jest 在同一个进程中运行所有测试而不是为每个测试派生独立进程——Jest 默认会跨进程并行运行测试同时调试多个进程很不方便--no-cache禁用缓存。2. 在测试中插入断点并在 Chrome 中附加在要调试的任意测试里放入debugger;语句然后在项目根目录运行$ npm run test:debug执行后 Jest 会开始启动测试但在执行前暂停等待调试器接入。此时在 Chrome 地址栏打开about:inspect打开后 Chrome 会显示 Developer Tools 的远程检查界面。在列表中找到你的测试进程点击对应的inspect断点会被设在 react script 的第一行这是为了给你留出打开开发者工具的时间防止 Jest 在你准备好之前就开始执行。点击界面右上角形如播放按钮的图标继续执行。当 Jest 运行到包含debugger;语句的测试时执行会在此暂停你可以检查当前作用域scope和调用栈call stack。方式二用 VS Code 调试 Jest 测试VS Code 对调试 Jest 测试提供了开箱即用的支持。把下面这份 launch.json 配置写入项目根目录的.vscode/launch.json如果文件已存在其他配置把configurations数组中的Debug CRA Tests这一项合并进去即可{ version: 0.2.0, configurations: [ { name: Debug CRA Tests, type: node, request: launch, runtimeExecutable: ${workspaceRoot}/node_modules/.bin/react-scripts, args: [test, --runInBand, --no-cache, --watchAllfalse], cwd: ${workspaceRoot}, protocol: inspector, console: integratedTerminal, internalConsoleOptions: neverOpen, env: { CI: true }, disableOptimisticBPs: true } ] }配置要点${workspaceRoot}是 VS Code 启动配置中的变量解析为当前打开的工作区根目录runtimeExecutable因此指向项目本地的node_modules/.bin/react-scriptsargs中的--runInBand、--no-cache与 Chrome 方式相同额外的--watchAllfalse关闭测试监视模式配合env: { CI: true }CRA 会强制 Jest 只运行一轮测试就结束进程而不启动交互式 watcherCRA 的测试脚本在设置了CI环境变量或显式传入--watchAllfalse时都会跳过 watch 模式console: integratedTerminal让测试输出打印在集成终端中disableOptimisticBPs: true避免调试器在源代码尚未加载前就乐观地设置断点。然后在 VS Code 中按F5或点击调试面板的启动按钮在断点处即可检查变量与调用栈。如何确认调试环境工作正常两种方式的验证标准一致执行流应当精确停在debugger;语句或你手动设置的断点处而不是在测试文件第一行之后直接跑完全部用例。停住后在调试面板确认能看到当前作用域变量和调用栈再继续执行如果测试按预期通过/失败且断点命中位置正确说明调试链路已经打通。遇到问题时的排查方向进程启动后没有暂停、测试直接跑完确认--inspect-brk是否写进了test:debug脚本Chrome 方式或 VS Code 是否确实走的是上面这份launch配置而不是npm test的 watch 模式--runInBand缺失时 Jest 会派生多个测试进程about:inspect里会出现多个难以对应的条目。npm test在 macOS 上卡住或崩溃如果控制台在打印react-scripts test后就卡住可能是 Watchman 安装的问题。官方文档建议先删除项目中的node_modules并重新npm install或使用 yarn仍不生效时再考虑更新 Watchman 到 4.7.0 或更高版本或参考文档列出的其他 issue 处理方案。调试完单测之后如果你想调试的是浏览器里的应用代码而不是 Jest 进程CRA 的 编辑器调试文档 中另有 VS Code Chrome 的应用调试launch.jsontype: chrome配合npm start使用与本文的 Node 测试调试是两套独立配置不要混用。更多测试运行细节覆盖率、聚焦测试、CI 行为见 running-tests 文档。【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考