CircleCI流水线中仅出现waitForElementToBeRemoved超时问题

• 增加超时时间并输出调试快照
  给waitForElementToBeRemoved显式设置更长的超时时间（比如10秒），同时在超时前打印当前DOM状态，方便定位问题：

  await waitForElementToBeRemoved(
    () => screen.getByTestId('loading-spinner'),
    { timeout: 10000 }
  ).catch(() => {
    screen.debug(); // 打印当前可见DOM
    console.log(document.body.innerHTML); // 打印完整DOM
    throw new Error('Element removal timed out');
  });
  

  查看CircleCI日志里的DOM快照，判断元素是真的未移除，还是移除速度慢于本地。

• 调整CircleCI资源配置
  CircleCI默认runner的CPU/内存资源通常比本地机器少，React 18的并发渲染在资源受限环境下可能出现延迟。可以：

  • 在.circleci/config.yml中使用更高规格的executor，比如medium+
  • 给Node.js增加内存限制：

    run:
      command: NODE_OPTIONS="--max-old-space-size=4096" npm test
    

  • 减少测试并行worker数量，避免资源竞争：npm test -- --maxWorkers=2

• 确保异步操作的等待逻辑正确
  确认触发元素移除的用户交互或状态更新已经完全完成：

  • 所有用户操作必须用await包裹，比如await user.click(screen.getByTestId('close-button'))，而不是直接调用click()
  • 若组件依赖异步API请求，确保测试中已经用waitFor或findBy*查询等待请求完成，再执行移除等待逻辑

• 临时禁用React Strict Mode排查
  CRA默认开启的Strict Mode会触发组件双重渲染，在CI环境下可能导致元素移除时机和本地不一致。可以在测试中临时关闭：

  render(<YourComponent />, {
    wrapper: ({ children }) => children, // 绕过Strict Mode
  });
  

  如果测试不再失败，说明Strict Mode下的重复副作用是问题根源，需要调整组件逻辑避免依赖单次渲染的副作用。

• 处理定时器和动画延迟
  若组件包含定时器（setTimeout/setInterval）或CSS过渡动画，CI环境的性能瓶颈可能导致延迟：

  • 用jest.useFakeTimers()模拟定时器，配合jest.runAllTimers()或jest.advanceTimersByTime()加速执行
  • 若有CSS动画，等待动画完成后再检查元素移除：

    await waitFor(() => {
      expect(screen.getByTestId('animated-element')).not.toBeInTheDocument();
    });
    

• 强制依赖版本一致性
  确保CircleCI安装的依赖和本地完全一致：

  • 提交package-lock.json或yarn.lock到仓库
  • 在CircleCI步骤中使用npm ci而非npm install，避免安装不同版本的依赖

• 添加测试重试机制
  即使是随机失败，也可以在CI配置中给测试步骤添加自动重试，减少偶发失败的影响：

  run:
    name: Run tests with retry
    command: |
      npm test -- --maxWorkers=2 || npm test -- --maxWorkers=2 || npm test -- --maxWorkers=2
  

内容的提问来源于stack exchange，提问作者Flávia Figueiredo