在 Jest 中手动模拟 Google 地图答案

【问题标题】：Manually mock Google Maps in Jest在 Jest 中手动模拟 Google 地图
【发布时间】：2022-02-16 21:12:18
【问题描述】：

我想模拟我与@googlemaps/js-api-loader 包一起使用的谷歌地图API。

现在，我需要确保调用了地理编码器，并且我正在尝试这样做：

const mockGeocoder = jest.fn();

jest.mock('google.maps.Geocoder', () => () => ({
  geocoder: mockGeocoder,
}));

但我明白了

Cannot find module 'google.maps.Geocoder' from 'tests/unit/usecases/maps/getPlaceByAddress.spec.ts'

  3 | const mockGeocoder = jest.fn();
  4 |
> 5 | jest.mock('google.maps.Geocoder', () => () => ({

不确定如何继续。谁能帮我解决这个问题？

【问题讨论】：

标签： javascript google-maps jestjs

【解决方案1】：

查看包https://www.npmjs.com/package/@googlemaps/jest-mocks 以获取模拟和示例。我不确定 Geocoder 是否有模拟，但应该可以按照那里的模式（并发送 pr）。

【讨论】：

【解决方案2】：

我实际上是在 Stackoverflow 上找到的。不知道为什么昨天谷歌没有向我推荐这个。

This 是我找到答案的地方

所以我做了以下事情：

const setupGoogleMock = () => {
  global.window.google = {
    maps: {
      Geocoder: jest.fn(() => ({
        geocode: mockGeocoder,
      })),
      GeocoderStatus: {
        ERROR: 'ERROR',
        INVALID_REQUEST: 'INVALID_REQUEST',
        OK: 'OK',
        OVER_QUERY_LIMIT: 'OVER_QUERY_LIMIT',
        REQUEST_DENIED: 'REQUEST_DENIED',
        UNKNOWN_ERROR: 'UNKNOWN_ERROR',
        ZERO_RESULTS: 'ZERO_RESULTS',
      },
    } as any,
  };
};

然后 beforeAll(() => { setupGoogleMock(); });

【讨论】：