React Native Jest测试无法Mock Geolocation的问题求助

嘿，我之前在React Native项目里用Jest测定位相关功能时也踩过一模一样的坑，给你分享下我怎么搞定的：

首先得明确：Jest的测试环境是Node.js，它没有浏览器环境里的navigator对象，所以直接操作navigator.geolocation肯定会报错。咱们得先把navigator模拟出来，再给它加定位相关的Mock方法。

方案1：单个测试文件中Mock #

在你需要测试定位功能的文件开头，加上这段代码：

// 先创建全局的navigator对象（如果还不存在的话）
global.navigator = global.navigator || {};
// Mock geolocation的所有方法
global.navigator.geolocation = {
  getCurrentPosition: jest.fn((success) => {
    // 模拟定位成功的返回值，你可以根据自己的需求修改坐标
    success({
      coords: {
        latitude: 31.2304,
        longitude: 121.4737,
        accuracy: 50,
      },
    });
  }),
  watchPosition: jest.fn(),
  clearWatch: jest.fn(),
};

这样就能避免navigator is not defined的错误，同时也不会出现“无法给undefined设置geolocation属性”的问题——因为我们先确保了navigator存在。

方案2：全局配置（推荐） #

如果多个测试文件都需要用到定位Mock，直接在全局配置里设置一次更方便：

1. 在项目根目录创建jest.setup.js文件，内容和上面的Mock代码一样：

global.navigator = global.navigator || {};
global.navigator.geolocation = {
  getCurrentPosition: jest.fn((success) => {
    success({
      coords: {
        latitude: 31.2304,
        longitude: 121.4737,
      },
    });
  }),
  watchPosition: jest.fn(),
  clearWatch: jest.fn(),
};

2. 在package.json的jest配置里指定这个setup文件（如果没有jest配置就新增）：

"jest": {
  "setupFiles": ["./jest.setup.js"]
}

这样所有测试文件都会自动加载这个Mock，不用每个文件都写一遍。

额外技巧：模拟定位失败的情况 #

有时候我们需要测试定位失败的场景，比如用户拒绝权限，只需要在对应的测试用例里重写Mock方法就行：

test('定位权限被拒绝时显示错误提示', () => {
  // 重写getCurrentPosition的实现，模拟失败
  global.navigator.geolocation.getCurrentPosition.mockImplementation((success, error) => {
    error({ code: 1, message: '用户拒绝了定位权限' });
  });
  
  // 这里写你的测试逻辑...
});

之前你碰到的TypeError: Cannot set property 'geolocation' of undefined，大概率是因为之前的方案直接给navigator.geolocation赋值，但此时navigator还没被定义，所以先通过global.navigator = global.navigator || {}确保它存在，再赋值就没问题了。

内容的提问来源于stack exchange，提问作者zagoa