title: React jest testing. Cannot read property 'maps' of undefined with google js api
body: <p>Hi guys I've setup the Google Maps JavaScript API and its working all fine, but my tests all fail now with the error </p>
  
  <p>TypeError: Cannot read property 'maps' of undefined.</p>
  
  <p>Here is what my component looks like</p>
  
  <pre><code>    import React, { Component } from 'react'
      import { connect } from 'react-redux'
      import List from './List'
      import { fetchPlaces } from '../../store/actions/places'
      const google = window.google
      export class Places extends Component {
  
      componentDidMount() {
  
      const pyrmont = { lat: -33.866, lng: 151.196 };
  
      const service = new google.maps.places.PlacesService(document.getElementById('map'))
      // this.props.fetchPlaces('fitzroy')
      const request = {
          location: pyrmont,
          radius: 500, type:
              ['restaurant'],
          placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
          fields: ['name', 'rating', 'formatted_phone_number', 'geometry']
      };
  
      service.nearbySearch(request, callback);
  
  
      function callback(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
              console.log(place)
          }
      }
  
     }
  ....rest of component
  </code></pre>
  
  <p>Here's what my test looks like</p>
  
  <pre><code>    import React from 'react'
      import { render, renderIntoDocument } from 'react-testing-library'
      import 'jest-dom/extend-expect'
      import { Places } from '../../Places/Places'
  
     const baseProps = {
      fetchPlaces: jest.fn(),
     };
  
      test('it shows a loading message when places are being loaded on mount', () =&gt; {
      const { container } = render(&lt;Places loading={true} places={[]} {...baseProps} /&gt;)
      expect(container).toHaveTextContent('Loading')
      });
  </code></pre>
  
  <p>First line of the error stack is
  "at Places.componentDidMount (src/components/Places/Places.js:13:34)"</p>
  
  <p>EDIT: I've setup a mock of the google api in my test file and if I console.log the google object its no longer undefined but I still get the same error in my test.</p>
  
  <pre><code>const setupGoogleMock = () =&gt; {
  
  const google = {
      maps: {
          places: {
              AutocompleteService: () =&gt; { },
              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: () =&gt; { },
          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;
      };
  
      beforeAll(() =&gt; {
          setupGoogleMock();
      });
  </code></pre>