Detox测试因布局覆盖失败：AnimatedModuleIdlingResource超时

问题现象 #

点击按钮后操作本身生效，但组件因状态变更重渲染后，测试会尝试再次点击已不在视图中的按钮，最终触发超时错误：

Test Failed: Wait for
[com.wix.detox.reactnative.idlingresources.AnimatedModuleIdlingResource]
to become idle timed out

相关代码 #

测试脚本 #

await element(by.id("post-1-cm")).tap();

await waitFor(element(by.id("comment-error")))
  .not.toExist()
  .withTimeout(5000);

按钮组件 #

<AppButton
  onPress={() => toggleComments(true)}
  disabled={disabled || submitting}
  inverted
  testID={`${testID}-cm`}
  buttonStyles={styles.button}>

状态变更后渲染的模态框 #

{showComments && (
  <CommentsModal
    reloadPosts={props.reload}
    visible={showComments}
    blockUser={blockUser}
    close={() => toggleComments(false)}
  />
)}

解决方法 #

方案1：用andThen()确保点击操作完全完成 #

通过andThen()包裹后续逻辑，让Detox确认点击操作执行完毕后，再处理状态变更后的检查，避免组件卸载后触发重复点击：

await element(by.id("post-1-cm")).tap().andThen(async () => {
  await waitFor(element(by.id("comment-error")))
    .not.toExist()
    .withTimeout(5000);
});

方案2：先等待模态框加载完成，再执行后续检查 #

给CommentsModal添加唯一testID（比如comments-modal），先等待模态框可见，确认状态切换和DOM更新完成后，再检查错误组件：

await element(by.id("post-1-cm")).tap();
// 等待模态框出现，确保状态变更完成
await waitFor(element(by.id("comments-modal")))
  .toBeVisible()
  .withTimeout(5000);
// 再检查错误组件是否不存在
await waitFor(element(by.id("comment-error")))
  .not.toExist()
  .withTimeout(5000);

额外排查点 #

如果还是出现动画资源超时，检查CommentsModal内部是否有未正确标记完成的动画。Detox会等待React Native的动画模块空闲，若动画未正确结束，会触发超时。可以给动画添加回调，或者在测试中增加对动画完成状态的等待。

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