Estoy aprendiendo a usar la API de Google Maps con mi aplicación React.

Sin embargo, tengo problemas con las pruebas unitarias de la API de Google.

Sin embargo, hay un problema con global.google.maps.event (aparentemente no está definido). Tuve que burlarme de window.google para el objeto Autocompletar. Entonces, necesito usar el método de activación 'real' en el evento obj, pero simular el autocompletado.

Mi prueba de inicialización pasa, pero no la segunda al activar el evento. Estoy tratando de activar un evento place_changed manualmente y verificar que se llame al controlador de lugar cambiado.

El código es el siguiente:

initAutocompletar.ts

 import { handlePlaceChange } from "../handlePlaceChange/handlePlaceChange"; export const initAutocomplete = () => { let autoComplete: google.maps.places.Autocomplete; autoComplete = new window.google.maps.places.Autocomplete( document.getElementById('autocomplete') as HTMLInputElement, { types: ['establishment'], componentRestrictions: { 'country': ['SG']}, fields: ['place_id', 'name', 'geometry'] } ) autoComplete.addListener("place_changed", () => handlePlaceChange(autoComplete)) }

initAutocompletar.prueba.ts

 import { handlePlaceChange } from "../handlePlaceChange/handlePlaceChange"; import { initAutocomplete } from "./initAutocomplete"; jest.mock("../handlePlaceChange/handlePlaceChange"); document.getElementById = jest.fn(); const mockAddListener = jest.fn(); const mockAutoComplete = jest.fn(); window['google'] = { maps: { places: { Autocomplete: mockAutoComplete } as unknown as google.maps.places.Autocomplete } as unknown as google.maps.Place } as any describe('initAutocomplete', () => { const mockInputElement : HTMLInputElement = document.createElement('input'); beforeEach(() => { (document.getElementById as jest.Mock).mockReturnValue(mockInputElement); (mockAutoComplete as jest.Mock).mockReturnValue({ addListener: mockAddListener }); }); // this test passes it('initialises google map Autocomplete object', () => { initAutocomplete(); expect(mockAutoComplete).toHaveBeenCalledWith( mockInputElement, { types: ['establishment'], componentRestrictions: { 'country': ['SG']}, fields: ['place_id', 'name', 'geometry'] } ); }); it('calls handlePlaceChange handler when place_changed event is triggered', () => { initAutocomplete(); // Cannot read properties of undefined (reading 'trigger') global.google.maps.event.trigger(mockAutoComplete, 'place_changed'); // fails at this line expect(handlePlaceChange).toHaveBeenCalledWith(mockAutoComplete); }); })