React+Jest测试访问DOM属性时无限挂起，求排查方案

问题描述 #

过去几个月测试一直运行正常，依赖版本均为固定值而非范围，且未主动更新任何依赖。但三天前起测试完全无法运行，Jest卡在[RUNS] myTests/file.spec.tsx状态无限挂起（已等待超10分钟）。设置10000ms超时后，测试也不会触发失败，疑似在执行前就卡住。

问题首先在CI流水线中出现，删除node_modules并重新本地安装后，本地环境也复现相同情况。经排查可在新测试文件中稳定复现：只要添加访问DOM属性的断言（如toHaveStyle）就会触发挂起：

const placeholder = screen.getByTestId('floating-placeholder');

expect(placeholder).toBeInTheDocument(); // 此断言正常工作
expect(placeholder).toHaveStyle({ top: '13px' }); // 添加此行后测试无限挂起

已尝试的操作 #

• 排查依赖版本问题，确认近几个月未主动更新依赖；更新RTL（jest-dom、user-event等）和Jest版本后，问题仍未解决
• 用--verbose标志运行Jest脚本，进程始终卡在npm timing npm:load Completed in 42ms（数值快速变化但无法推进）
• 检查jest-dom是否被peerDependencies隐式更新，未发现异常

环境信息 #

• NPM: 7.21.0
• Node: 16.8.0
• @testing-library/jest-dom: 5.16.4
• @testing-library/react: 13.1.1
• @testing-library/user-event: 13.5.0
• react: 18.0.0
• fetch-mock-jest: 1.5.1
• typescript: 4.6.3
• @types/jest: 29.4.0
• 项目由create-react-app创建

排查建议 #

1. 校验依赖完整性与缓存

   • 执行npm cache clean --force清空npm缓存，再重新执行npm install，避免缓存中损坏的包引发问题
   • 用npm ls查看依赖树，重点排查jest-dom、jsdom相关子依赖是否存在隐式更新（部分依赖未锁死版本可能导致npm拉取新版本）

2. 隔离jsdom环境冲突

   • 手动指定jsdom固定版本（如20.x或19.x），测试是否因jsdom版本兼容性导致样式处理死循环
   • 创建极简测试文件，排除其他工具干扰：

     import { render, screen } from '@testing-library/react';
     
     test('基础toHaveStyle测试', () => {
       render(<div data-testid="test-div" style={{ top: '13px' }}></div>);
       expect(screen.getByTestId('test-div')).toHaveStyle({ top: '13px' });
     });
     

     单独运行该测试，若正常则说明问题出在原有测试代码或其他依赖的冲突

3. 排查Jest配置与缓存

   • 检查是否存在自定义Jest配置（如jest.config.js或package.json中的jest字段），create-react-app内置配置与自定义配置可能冲突
   • 用react-scripts test --no-cache运行测试，禁用Jest缓存，避免缓存状态导致异常

4. 验证Node/NPM版本兼容性

   • 临时升级Node到16.x最新稳定版（如16.20.x），或降级到之前确认可用的版本，排查是否因子依赖版本更新后不再兼容当前Node版本

5. 调试事件循环阻塞

   • 用react-scripts test --inspect启动测试，在Chrome中打开chrome://inspect连接到Jest进程，查看调用栈定位卡环节点，确认是jsdom样式处理死循环还是其他代码阻塞事件循环

6. 检查CI环境变更

   • 排查CI环境的系统参数（Node版本、NPM版本、操作系统）是否有更新，或CI缓存策略是否变更导致依赖异常

内容的提问来源于stack exchange，提问作者Unapedra