How to test GoogleMap using jest

Question

I'm developing a react application using react-google-maps npm's compontent. How should i add testing to this component?

I need to develop some testing over the map but when i try to render it using jest, the shallow only returns the container component that I gave the Map component to render.

const props = {
  googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
  containerElement: <div style={{ height: '100%' }} />,
  loadingElement: <div style={{ height: '100%' }} />,
  mapElement: <div style={{ height: '100%' }} />,

  defaultZoom: 5,

  defaultCenter: { location: { lat: 0, lng: 0 } },

  iconPrefix: '/',
  points: points.map(p => createMarker(p)), // this is just for styling the markers.
};

describe('Map component', () => {
  const component = shallow(<Map {...props} />);

  it('It should match snapshot', () => {
    console.log('....: ', component.html()); // -> returns <div style="height:100%"></div>
    expect(component.html()).toMatchSnapshot();
  });
});

Someone has been through on the same problem?? Do anyone have any directions about how can I resolve it??

I appreciate any help

How to test GoogleMap using jest

0 Answers0