Hi! I'm attempting to write a "simple" test to check for a react class component state change. Specifically, I'm testing if the lat(latitude) and lng(longitude) states change if Google successfully geocodes some string(address) that I send it. Here is an example of what I want to test
(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(),
},
});
}
});
}
In my jest suite, I'm having issues writing my test and spying/mocking out the google.maps.Geocoder because the google library is never imported. It is attached via a script, like so:
<script async defer
src=<%="https://maps.googleapis.com/maps/api/js?key=#{Rails.application.config.google_api_key}&callback=initMap"%>>
</script>
Just so its confirmed, the code works as intended after manual testing, but I receive errors inside my testing suite when attempting to spy like so:
let geocoderSpy = jest.spyOn(google.maps, 'Geocoder');
I receive an error like this:
● 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)
So then, I followed up this problem and found this stackoverflow post and this answer that claimed to solve it by adding something like this to jest in the package.json file...
"globals": { "google": { } }
This also failed to solve my problem. I think the solution is to somehow find out how to import google, but not quite sure how to do that.... If anyone can help me out that would be greatly appreciated. I would love to learn how to test something like this. In advance, many thanks. Austin