前端测试中模拟浏览器环境的核心是补全document、window等全局对象的真实行为，而非生成假数据；需手动挂载localStorage、location等API，mock全屏/地理/媒体等权限API，并用MSW或jest.mock拦截网络请求，且按环境条件启用。

前端开发中模拟浏览器环境 API，核心是补全或替换 JSDOM 或 Node.js 测试环境中缺失的浏览器全局对象和方法，让业务代码能正常执行、逻辑可验证。重点不是生成假数据，而是让 document、window、navigator 等对象具备真实行为。

补全常用浏览器全局属性和方法

很多 API（如 localStorage、sessionStorage、location、history）在 Jest + JSDOM 中默认不完整或只读。需手动挂载：

• 用 Object.defineProperty 模拟 document.cookie 的读写能力，配合 getter/setter 控制值
• 为 localStorage 和 sessionStorage 创建内存版实现（可用 jest.mock 替换或直接赋值 global.localStorage = new Map()）
• 重写 window.location：用 jest.mock 拦截或在测试前设置 delete window.location; window.location = { href: '', assign: jest.fn() }
• 模拟 navigator.onLine：动态控制返回 true 或 false，验证离线逻辑

模拟全屏、媒体、地理等需要权限的 API

这些 API 在无 GUI 环境中会报错或不可用，必须显式 mock：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• requestFullscreen、exitFullscreen：在 Element.prototype 和 document 上定义，用 jest.fn().mockResolvedValue() 模拟成功，或 mockRejectedValue() 模拟拒绝
• navigator.geolocation.getCurrentPosition：返回固定坐标或抛出错误，覆盖定位成功/失败/超时分支
• MediaDevices.getUserMedia：返回空 MediaStream 对象，避免测试因摄像头权限中断
• Notification.requestPermission：返回 'granted'、'denied' 或 'default'，验证通知逻辑分支

拦截并控制 fetch / XMLHttpRequest 行为

真实请求不能发，但要保留调用链和 Promise 流程：

立即学习“前端免费学习笔记（深入）”；

• 用 jest.mock('node-fetch') 或 jest-fetch-mock 替换全局 fetch，支持按 URL、method、body 匹配不同响应
• 对 XMLHttpRequest，可在 beforeAll 中重写其 open、send、onload 等方法，手动触发 onload 并设置 responseText
• 推荐 MSW（Mock Service Worker）：它不替换全局函数，而是通过 Service Worker 拦截真实请求，更贴近浏览器行为，开发调试时也能看到 Network 面板中的 mock 请求

按环境自动启用或禁用 Mock

避免误入生产环境：

• 在 setupFilesAfterEnv 中判断 process.env.NODE_ENV === 'test' 再加载 mock 逻辑
• 对关键 API（如全屏、通知），用 if (typeof document !== 'undefined') 做安全包裹，防止 SSR 场景报错
• Vue/React 项目中，可在入口文件用 if (import.meta.env.DEV) 控制是否注册 MSW worker