前端开发中怎么用 JS Mock 模拟浏览器环境 API-js教程-PHP中文网

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

前端开发中怎么用 js mock 模拟浏览器环境 api

前端开发中模拟浏览器环境 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 在无 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'，验证通知逻辑分支

真实请求不能发，但要保留调用链和 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 请求