React-google-maps: Testing <GoogleMap/> inside withScriptjs and withGoogleMap

Created on 20 Dec 2016 · 19Comments · Source: tomchentw/react-google-maps

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

All 19 comments

@ZephD you ever get this resolved?

oshalygin on 24 Mar 2017

Nope.

ZephD on 24 Mar 2017

@ZephD I'm having the exact same issue, I tried it 5 different ways and even relaxed the timeout limit. I can't get at the children of the component which Id really like to test because they contain <Marker>'s :(

I'll give it another whirl later in the day and let you know.

oshalygin on 24 Mar 2017

You don't need done to be called with this component, so just get rid of that in beforeEach and it should work.

petertdinh on 30 Mar 2017

@petertdinh care to share a snippet? I couldn't get it working without the done call. The script loads asynchronously, how is it that the done call isnt needed? You mean return? That does the same thing.

oshalygin on 31 Mar 2017

The done is the most important bit, as it gets called once the map is ready, allowing the tests to continue.
Looking back at this code, it may be possible to increase the timeout, but I doubt that's the issue.

ZephD on 31 Mar 2017

👍1

Increasing the timeout is a very big hack, we shouldn't be doing that, even if it works. I've tried a few approaches to testing this and the best I can get is reading the props on the component(aka useless).

oshalygin on 31 Mar 2017

Don't do this. Use shallow rendering to test the inner component directly.

tomchentw on 20 Apr 2017

👍1

Please refer to Getting Help section in the README (or #469).

tomchentw on 20 Apr 2017

How to test the GoogleMap and access the Marker elements using shallow rendering?
I can't figure out what you mean. Can you give an example please? Would be great to have it in the documentation.

christianrank on 23 Oct 2017

@christianrank short version

const Inner = props => <GoogleMap><Marker ………

const Outer = withScriptjs(withGoogleMap((Inner)); // you __use__ with Outer
// test case
expect(<Inner {...props />).toMatchSnapshot(); // you __test__ on Inner

tomchentw on 23 Oct 2017

@tomchentw please share a "non-short" version :)

toroduque on 27 Oct 2017

@tomchentw @toroduque Can relate, would be much appreciated.

metr1ckzu on 28 Oct 2017

@tomchentw testing the "inner component" with shallow rendering doesn't work for me. For example:

    const component = renderer.create(                                                                    
      <Inner containerElement={ <div id='containerElement'/> } mapElement={ <div id="mapElement"/> }/>
    );                                                                                                    
    let tree = component.toJSON();

At this point, tree is simply

<div  id='containerElement'>
    <div id="mapElement">
    </div>
</div

which isn't meaningful.

tyewang on 1 Nov 2017

Try using shallow rendering? @tyewang
https://reactjs.org/docs/shallow-renderer.html

tomchentw on 2 Nov 2017

👍1

Got it, didn't realize shallow rendering was different than the test renderer. Thanks!

tyewang on 2 Nov 2017

@tyewang Hi sir, would you mind to share your tests? Can't figure out how to test react-google-maps, thanks in advance

metr1ckzu on 6 Nov 2017

👍1

@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();
});

tyewang on 7 Nov 2017

👍5

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

tomchentw on 9 Nov 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings