JavaScript测试中模拟网络离线/在线需三步：1.用Object.defineProperty mock navigator.onLine属性；2.手动dispatch 'offline'/'online'事件；3.额外mock fetch等请求层以确保稳定。
在 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 事件。测试中需手动触发以验证监听逻辑：
立即学习“Java免费学习笔记（深入）”；
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 />);
// 断网
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();
});
3. 处理 fetch / axios 等网络请求的失败模拟
单纯切换 onLine 状态不会让 fetch 抛出错误（现代浏览器中 fetch 在离线时仍会 reject，但行为不一致）。为保证测试稳定，建议额外 mock 请求层：
- Jest：用
jest.mock('node-fetch')或拦截全局fetch - Vitest：用
vi.mock('fetch')或vi.stubGlobal('fetch', mockFetch) - 对离线场景，让 mock fetch 抛出
TypeError: Failed to fetch（匹配真实 reject 原因）
4. 注意跨环境差异与清理
不同测试运行器（JSDOM vs 真实浏览器）对 navigator.onLine 和事件的支持略有不同：
- JSDOM 默认
navigator.onLine === true，且不自动触发 online/offline 事件 - 真实浏览器（如 Playwright、Cypress）可更贴近实际，但配置复杂
- 务必在
afterEach中还原navigator.onLine，避免影响后续测试
不复杂但容易忽略。关键就三点：mock 属性、手动 dispatch、补上请求层兜底。
