如何测试 google.maps.Geocoder?

Question

嗨！我正在尝试编写一个"简单"测试来检查反应类组件的状态更改。具体来说，我正在测试如果谷歌成功地对我发送的某些字符串(地址(进行地理编码，纬度(纬度(和 lng(经度(状态是否会发生变化。以下是我想测试(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)

然后，我跟进了这个问题，找到了这个 stackoverflow 帖子和这个答案，它声称通过在 package.json 文件中的开玩笑中添加这样的东西来解决它......

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

这也未能解决我的问题。我认为解决方案是以某种方式找出如何导入谷歌，但不太确定如何做到这一点......如果有人可以帮助我，将不胜感激。我很想学习如何测试这样的东西。提前，非常感谢。奥斯汀

Answer 1

似乎你不是唯一一个经历过用Jest测试谷歌地图的恐怖的人。我发现周围有很多项目和对话。但他们似乎都建议嘲笑谷歌地图库，做类似的事情：

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 调用。

Answer 2

灵感来自马蒂厄的回答。我不得不做一些改变，使这个解决方案适应我的项目(Nuxt.js/Vue.JS(。

我已将地理编码器函数替换为地理编码器类的模拟。

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: class {
public async geocode() {
return Promise.resolve()
}
},
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',
},
},
}
// @ts-ignore
global.window.google = google
}
setupGoogleMock()