Как я могу проверить google.maps.Geocoder?

Question

Привет! Я пытаюсь написать «простой» тест для проверки изменения состояния компонента класса реакции. В частности, я проверяю, меняются ли состояния широты (широты) и lng (долготы), если Google успешно геокодирует некоторую строку (адрес), которую я отправляю. Вот пример того, что я хочу проверить (i.e. the lat and lng states being set to results[0].geometry.location.lat()):

getLatLong = (address) => {
    const that = this;
    var geo = new google.maps.Geocoder;

    geo.geocode({'address':address},(results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            that.setState(
            {
                center: {
                    lat: results[0].geometry.location.lat(),
                    lng: results[0].geometry.location.lng(),
                },
            });
        }
    });
}

В моем наборе шуток у меня возникают проблемы при написании теста и шпионаже / издевательстве над google.maps.Geocoderпотому что библиотека Google никогда не импортируется. Он прикрепляется с помощью сценария, например:

<script async defer
    src=<%="https://maps.googleapis.com/maps/api/js?key=#{Rails.application.config.google_api_key}&callback=initMap"%>>
</script>

Точно так же, как это подтверждено, код работает как задумано после ручного тестирования, но я получаю ошибки в моем наборе тестов, когда пытаюсь шпионить вот так:

let geocoderSpy = jest.spyOn(google.maps, 'Geocoder');

Я получаю такую ​​ошибку:

  ● EventMap › getLatLong works as intended by getting coordinates of valid locations › calls the geocoder function

ReferenceError: google is not defined

  34 |         let geocoder;
  35 |         beforeEach(() => {
> 36 |             let geocoderSpy = jest.spyOn(google.maps, 'Geocoder');
     |                                          ^
  37 |             geocoder = jest.createSpy('Geocoder', ['geocode']);
  38 |             geocoderSpy.and.returnValue(geocoder);
  39 |         });

  at Object.google (app/javascript/__tests__/EventPage/EventMap.test.jsx:36:42)

Итак, я решил эту проблему и обнаружил этот переполнение стекаpost и этот ответ, который утверждал, что решил эту проблему, добавив что-то вроде jest в файл package.json ...

"globals": { "google": { } }

Это также не решило мою проблему. Я думаю, что решение состоит в том, чтобы как-то выяснить, как импортировать Google, но не совсем уверен, как это сделать .... Если кто-то может мне помочь, это будет очень признательно. Я хотел бы научиться тестировать что-то подобное. Заранее большое спасибо. Остин

Answer 1

Похоже, вы не единственные, кто пережил ужасы тестирования карт Google с помощью Jest. Я нашел много проектов и разговоров вокруг. Но все они, похоже, рекомендуют издеваться над библиотекой карт Google, выполнив что-то похожее на это:

const setupGoogleMock = () => {
  /*** Mock Google Maps JavaScript API ***/
  const google = {
    maps: {
      places: {
        AutocompleteService: () => {},
        PlacesServiceStatus: {
          INVALID_REQUEST: 'INVALID_REQUEST',
          NOT_FOUND: 'NOT_FOUND',
          OK: 'OK',
          OVER_QUERY_LIMIT: 'OVER_QUERY_LIMIT',
          REQUEST_DENIED: 'REQUEST_DENIED',
          UNKNOWN_ERROR: 'UNKNOWN_ERROR',
          ZERO_RESULTS: 'ZERO_RESULTS',
        },
      },
      Geocoder: () => {},
      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',
      },
    },
  };
  global.window.google = google;
};

// in test file.
beforeAll(() => {
  setupGoogleMock();
});

(источник: https://github.com/hibiken/react-places-autocomplete/issues/189#issuecomment-377770674)

Для этого есть даже пакет npm! https://github.com/hupe1980/jest-google-maps-mock

Не уверен, что это решит вашу проблему, потому что это позволит вам проверить только если вы правильно вызвали правильный метод из API, а не проверять если вы получите правильный ответ от API.

Однако я не знаю, целесообразно ли реально выполнять реальные вызовы API при тестировании такой функциональности.