Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Testing <GoogleMap/> inside withScriptjs and withGoogleMap

See original GitHub issue

The element is as follows:

import React from 'react';
import { withGoogleMap, GoogleMap } from 'react-google-maps';
import withScriptjs from 'react-google-maps/lib/async/withScriptjs';

const AsyncGoogleMap = withScriptjs(withGoogleMap(({ onMapLoad }) => (
    <GoogleMap
      ref={onMapLoad}
      defaultZoom={1}
      defaultCenter={{ lat: 0, lng: 0 }}
    />
  )));
export default AsyncGoogleMap;

The test is as follows:

import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';

import AsyncGoogleMap from './AsyncGoogleMap';

describe('AsyncGoogleMap component', () => {
  let wrapper;
  before((done) => {
    wrapper = mount(<AsyncGoogleMap
      googleMapURL={'https://maps.googleapis.com/maps/api/js'}
      loadingElement={<div>Loading</div>}
      containerElement={<div>Container</div>}
      mapElement={<div>Map</div>}
      onMapLoad={done}
    />);
  });

  it('renders without throwing', () => {
    expect(wrapper).toExist();
  });
});

I get the error:

Warning: Make sure you’ve put a <script> tag in your <head> element to load Google Maps JavaScript API v3. If you’re looking for built-in support to load it for you, use the “async/ScriptjsLoader” instead. See https://github.com/tomchentw/react-google-maps/pull/168

(Followed by the Mocha error:

“before all” hook failed Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure “done()” is called; if returning a Promise, ensure it resolves.

)

Therefore, ‘done’ is not being called, because of the first error preventing the map from being created.

Now, I’m using withScriptjs, and therefore google.maps should be loaded for me. I should not be getting the first error.

Note that the element <AsyncGoogleMap/> works perfectly in a real environment, but it does not work when testing.

Is there anything I have missed?

Issue Analytics

State:
Created 7 years ago
Comments:19 (5 by maintainers)

Top GitHub Comments

5reactions

tyewangcommented, Nov 7, 2017

@metr1ckzu

// component.js
const MapWithoutDOMInstances = class extends React.Component {
  render() {
      <GoogleMap ...>
        ...
      </GoogleMap>
  }
}

const MapWithDOMInstances = withGoogleMap(MapWithoutDOMInstances);

// component.test.js
test("renders correctly", () => {
  const renderer = new ShallowRenderer();

  const result = renderer.render(<MapWithoutDOMInstances ... />);

  expect(result).toMatchSnapshot();
});

1reaction

tomchentwcommented, Nov 9, 2017

@tyewang wanna make a PR adding these to the src/docs 😃 ?