JavaScript 中怎么在测试中模拟网络断开与恢复的离线状态-js教程-PHP中文网

javascript测试中模拟网络离线/在线需三步：1.用object.defineproperty mock navigator.online属性；2.手动dispatch 'offline'/'online'事件；3.额外mock fetch等请求层以确保稳定。

javascript 中怎么在测试中模拟网络断开与恢复的离线状态

在 JavaScript 测试中模拟网络断开与恢复（即离线/在线状态切换），核心是控制 navigator.onLine 的返回值，并触发 online 和 offline 事件。但要注意：navigator.onLine 是只读属性，不能直接赋值，必须通过测试环境（如 Jest、Vitest）的 mock 机制配合 DOM 事件手动触发来实现可靠模拟。

1. 模拟 navigator.onLine 状态

浏览器原生的 navigator.onLine 无法直接修改，需在测试前 mock 整个 navigator 对象或其属性：

使用 Object.defineProperty 动态定义可读取的 onLine 属性（推荐，兼容性好）
确保在每个测试用例前重置，避免状态污染（例如用 beforeEach）
注意：仅改 onLine 不会自动触发事件，需手动 dispatch

示例（Jest/Vitest）：

beforeEach(() => {
  delete (navigator as any).onLine;
  Object.defineProperty(navigator, 'onLine', {
    value: true,
    writable: true,
    configurable: true
  });
});

2. 手动触发 online/offline 事件

真实浏览器会在网络状态变化时在 window 上派发 online 或 offline 事件。测试中需手动触发以验证监听逻辑：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 dispatchEvent(new Event('offline')) 模拟断网
用 dispatchEvent(new Event('online')) 模拟恢复
确保被测代码已通过 window.addEventListener 注册了对应监听器

完整测试片段：

test('should show offline banner when network disconnects', () => {
  // 初始在线
  Object.defineProperty(navigator, 'onLine', { value: true });

  render(<app></app>);
  
  // 断网
  Object.defineProperty(navigator, 'onLine', { value: false });
  window.dispatchEvent(new Event('offline'));

  expect(screen.getByText(/offline/i)).toBeInTheDocument();

  // 恢复
  Object.defineProperty(navigator, 'onLine', { value: true });
  window.dispatchEvent(new Event('online'));

  expect(screen.queryByText(/offline/i)).not.toBeInTheDocument();
});