企业官网建设流程全解析

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", "--watchAll=false"], "cwd": "${workspaceRoot}", "protocol": "inspector", "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "env": { "CI": "true" }, "disableOptimisticBPs": true } ] }

配置要点：

• ${workspaceRoot}是 VS Code 启动配置中的变量，解析为当前打开的工作区根目录，runtimeExecutable因此指向项目本地的node_modules/.bin/react-scripts；
• args中的--runInBand、--no-cache与 Chrome 方式相同，额外的--watchAll=false关闭测试监视模式；配合"env": { "CI": "true" }，CRA 会强制 Jest 只运行一轮测试就结束进程，而不启动交互式 watcher（CRA 的测试脚本在设置了CI环境变量或显式传入--watchAll=false时都会跳过 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.json（type: "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