JavaScript Mock 模拟中怎么模拟地理位置定位服务的返回数据-js教程-PHP中文网

javascript中模拟地理位置定位服务的核心是替换或拦截navigator.geolocation行为，可通过手动mock对象、sinon stub动态控制、或promise封装函数mock三种方式实现，需注意执行时机、类型兼容性和错误分支覆盖。

javascript mock 模拟中怎么模拟地理位置定位服务的返回数据

在 JavaScript 单元测试或前端 Mock 场景中，模拟地理位置定位服务（navigator.geolocation）的返回数据，核心是**替换或拦截原生的 Geolocation 对象行为**，让 getCurrentPosition 和 watchPosition 返回可控的假数据。

覆盖 `navigator.geolocation` 对象

最直接的方式是在测试前手动 mock navigator.geolocation，用一个伪造对象替代原生实现：

创建一个包含 getCurrentPosition 和可选 watchPosition、clearWatch 的对象
getCurrentPosition 接收 success 回调和 error 回调，直接调用 success 并传入预设坐标
注意：需在全局作用域（如 Jest 的 beforeEach 或浏览器环境 script 开头）执行，且确保在被测代码执行前完成覆盖

示例（Jest 环境）：

beforeEach(() => {
  const mockGeolocation = {
    getCurrentPosition: jest.fn((success, error) => {
      success({
        coords: {
          latitude: 39.9042,
          longitude: 116.4074,
          accuracy: 20,
          altitude: null,
          altitudeAccuracy: null,
          heading: null,
          speed: null
        },
        timestamp: Date.now()
      });
    }),
    watchPosition: jest.fn(),
    clearWatch: jest.fn()
  };
  Object.defineProperty(navigator, 'geolocation', {
    value: mockGeolocation,
    writable: true
  });
});

使用 Sinon.js 拦截并 stub 方法（推荐用于复杂场景）

当需要动态控制返回结果（如第一次成功、第二次失败）、验证调用次数或参数时，Sinon 提供更灵活的 stub 能力：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

用 sinon.stub(navigator.geolocation, 'getCurrentPosition') 替换方法
通过 .callsFake() 自定义逻辑，支持条件判断或抛出错误
测试后记得 .restore() 恢复原始行为，避免污染其他测试

示例：

let geolocationStub;

beforeEach(() => {
  geolocationStub = sinon.stub(navigator.geolocation, 'getCurrentPosition');
  geolocationStub.callsFake((success, error) => {
    // 可根据测试需求切换逻辑
    if (Math.random() > 0.5) {
      success({ coords: { latitude: 31.2304, longitude: 121.4737 } });
    } else {
      error({ code: 1, message: 'Permission denied' });
    }
  });
});

afterEach(() => {
  geolocationStub.restore();
});

处理 Promise 封装的调用（现代写法）

很多项目会将 getCurrentPosition 封装为 Promise（如用 util.promisify 或手写 Promise 包装），此时 Mock 需返回 Promise：

若封装函数是独立模块（如 getLocation()），直接 mock 该函数，而非原生 API
若必须 mock 原生方法，可在 callsFake 中返回 Promise.resolve(...) 或 Promise.reject(...)
注意：原生 getCurrentPosition 是回调式，不能直接 return new Promise(...) 后赋值给它——需在 fake 函数体内 resolve/reject

示例（mock 封装函数）：

// 假设你有 utils/geo.js
export const getLocation = () =>
  new Promise((resolve, reject) =>
    navigator.geolocation.getCurrentPosition(resolve, reject)
  );

// 测试中 mock 整个模块
jest.mock('./utils/geo', () => ({
  getLocation: jest.fn().mockResolvedValue({
    coords: { latitude: 22.3193, longitude: 114.1694 }
  })
}));

注意事项与常见坑

执行时机关键：Mock 必须在被测代码 import 或调用 navigator.geolocation 之前生效；Jest 中推荐在 beforeAll 或 beforeEach 里做
类型兼容性：TypeScript 用户需扩展 NavigatorGeolocation 类型，或使用 // @ts-ignore 临时绕过（不推荐长期使用）
浏览器限制：真实浏览器中，geolocation 仅在安全上下文（HTTPS 或 localhost）可用；Mock 可绕过此限制，但需确保测试环境满足基础条件
不要忽略 error 分支：务必覆盖权限拒绝、定位超时、不可用等错误场景，否则逻辑可能遗漏健壮性处理