如何在CI环境中使用Detox测试React Native应用的离线模式？

核心实现思路 #

Detox提供了跨平台的网络状态控制API，也可以结合原生工具命令精准模拟离线场景，下面分平台和CI环境具体说明实操方法：

iOS 平台测试步骤 #

• 优先使用Detox内置API切换网络状态，代码示例：

  await device.setNetworkConnection({ type: 'none' }); // 切换至离线模式
  // 执行需验证的离线操作，比如触发需要网络的功能，检查离线提示
  await expect(element(by.id('offline-notice'))).toBeVisible();
  // 恢复网络连接
  await device.setNetworkConnection({ type: 'wifi' });
  

• 若API生效异常，可使用Xcode的simctl命令直接控制模拟器状态：

  xcrun simctl status_bar booted override --cellularData off --wifi off
  

Android 平台测试步骤 #

• 同样优先用Detox跨平台API，代码示例：

  await device.setNetworkConnection({ type: 'none' });
  // 验证离线行为，比如检查重试按钮是否显示
  await expect(element(by.id('retry-btn'))).toBeVisible();
  // 恢复网络
  await device.setNetworkConnection({ type: 'wifi' });
  

• 针对特殊机型或模拟器，可使用adb命令兜底：

  # 关闭移动数据与WiFi
  adb shell svc data disable
  adb shell svc wifi disable
  # 恢复网络连接
  adb shell svc data enable
  adb shell svc wifi enable
  

CI环境适配要点 #

• GitHub Actions/GitLab CI：
  • iOS：确保使用Xcode 11+版本，Detox启动模拟器后直接调用API或命令即可，无需额外权限配置。
  • Android：确认CI runner的模拟器已开启INTERNET权限（默认开启），adb命令可正常执行，部分环境需提前配置adb路径。
• 通用注意：CI中切换网络状态后，建议添加1秒左右延迟（await device.waitFor(1000)），确保React Native的网络状态监听（如NetInfo）能正确触发状态更新。

测试用例编写注意事项 #

• 测试前确保应用处于已知状态（如已登录、首页加载完成），避免其他状态干扰离线场景验证。
• 分别验证主动离线（用户手动切飞行模式）和被动离线（网络突然断开）两种场景，后者可通过切换网络状态后立即执行操作模拟。
• 重点验证离线状态下的缓存展示、离线提示、重试交互，以及恢复网络后的数据同步是否符合预期。

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