如何在 React Jest 测试中“模拟”navigator.geolocation

Question

我正在尝试为我构建的一个反应组件编写测试，该组件在这样的方法中使用navigator.geolocation.getCurrentPosition()（我的组件的粗略示例）：

class App extends Component {

  constructor() {
    ...
  }

  method() {
    navigator.geolocation.getCurrentPosition((position) => {
       ...code...
    }
  }

  render() {
    return(...)
  }

}

我正在使用create-react-app，其中包括一个测试：

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

此测试失败，在控制台中打印出来：

TypeError: Cannot read property 'getCurrentPosition' of undefined

我是 React 新手，但对 Angular 1.x 有相当多的经验。在 Angular 中，模拟（在 beforeEach 中的测试中）函数、“服务”和全局对象方法（如 navigator.geolocation.etc）是很常见的。我花时间研究这个问题，这段代码是我能得到的最接近模拟的代码：

global.navigator = {
  geolocation: {
    getCurrentPosition: jest.fn()
  }
}

我把它放在我的 App 测试文件中，但是没有效果。

我怎样才能“模拟”出这个导航器方法并让测试通过？

编辑：我研究了使用一个名为 geolocation 的库，它应该包装 navigator.getCurrentPosition 以在节点环境中使用。如果我理解正确，jest 在节点环境中运行测试并使用 JSDOM 来模拟 window 之类的东西。我还没有找到很多关于 JSDOM 对navigator 的支持的信息。上面提到的库在我的反应应用程序中不起作用。即使库本身已正确导入并且在 App 类的上下文中可用，使用特定方法 getCurrentPosition 只会返回 undefined。

Answer 1

似乎已经有一个 global.navigator 对象，和你一样，我无法重新分配它。

我发现模拟地理定位部分并将其添加到现有的 global.navigator 对我有用。

const mockGeolocation = {
  getCurrentPosition: jest.fn(),
  watchPosition: jest.fn()
};

global.navigator.geolocation = mockGeolocation;

我将其添加到 src/setupTests.js 文件中，如此处所述 - https://create-react-app.dev/docs/running-tests#initializing-test-environment

Answer 2

我知道这个问题可能已经解决了，但似乎上面所有的解决方案都是错误的，至少对我来说是这样。

当你做这个模拟时：getCurrentPosition: jest.fn() 它返回未定义，如果你想返回一些东西，这是正确的实现：

const mockGeolocation = {
  getCurrentPosition: jest.fn()
    .mockImplementationOnce((success) => Promise.resolve(success({
      coords: {
        latitude: 51.1,
        longitude: 45.3
      }
    })))
};
global.navigator.geolocation = mockGeolocation;

我正在使用 create-react-app

Answer 3

模拟setupFiles

// __mocks__/setup.js

jest.mock('Geolocation', () => {
  return {
    getCurrentPosition: jest.fn(),
    watchPosition: jest.fn(),
  }
});

然后在你的package.json

"jest": {
  "preset": "react-native",
  "setupFiles": [
    "./__mocks__/setup.js"
  ]
}

Answer 4

我按照上面@madeo 的评论来模拟global.navigator.geolocation。成功了！

另外我做了以下模拟global.navigator.permissions：

  global.navigator.permissions = {
    query: jest
      .fn()
      .mockImplementationOnce(() => Promise.resolve({ state: 'granted' })),
  };

根据要求将state 设置为granted、denied、prompt 中的任何一个。

Answer 5

TypeScript 版本，适用于任何人 Cannot assign to 'geolocation' because it is a read-only property.

在mockNavigatorGeolocation.ts 文件中（这可以位于test-utils 文件夹或类似文件夹中）

export const mockNavigatorGeolocation = () => {
  const clearWatchMock = jest.fn();
  const getCurrentPositionMock = jest.fn();
  const watchPositionMock = jest.fn();

  const geolocation = {
    clearWatch: clearWatchMock,
    getCurrentPosition: getCurrentPositionMock,
    watchPosition: watchPositionMock,
  };

  Object.defineProperty(global.navigator, 'geolocation', {
    value: geolocation,
  });

  return { clearWatchMock, getCurrentPositionMock, watchPositionMock };
};

然后我将它导入到文件顶部的测试中：

import { mockNavigatorGeolocation } from '../../test-utils';

然后像这样使用函数：

const { getCurrentPositionMock } = mockNavigatorGeolocation();
getCurrentPositionMock.mockImplementation((success, rejected) =>
  rejected({
    code: '',
    message: '',
    PERMISSION_DENIED: '',
    POSITION_UNAVAILABLE: '',
    TIMEOUT: '',
  })
);

Answer 6

出于某种原因，我没有定义 global.navigator 对象，所以我必须在我的 setupTests.js 文件中指定它

const mockGeolocation = {
  getCurrentPosition: jest.fn(),
  watchPosition: jest.fn(),
}
global.navigator = { geolocation: mockGeolocation }