is there a way to test the google maps function in java with jest enzyme?

You should assign the mocked google variable to window before running the test.

E.g.

Map.js:

import React, { Component } from 'react';

class Map extends Component {
  initMap = () => {
    const el = document.getElementById('map-js');
    const options = {
      center: {
        lat: -27.9959656,
        lng: 153.2879044,
      },
      zoom: 9,
    };

    const map = new window.google.maps.Map(el, options);
    map.data.addGeoJson(this.props.data);
  };

  componentDidUpdate() {
    this.initMap();
  }

  render() {
    return (
      <div className="map__holder">
        <div id="map-js"></div>
      </div>
    );
  }
}

export default Map;

Map.test.js:

import Map from './Map';
import React from 'react';
import { shallow } from 'enzyme';

describe('64635170', () => {
  it('should pass', () => {
    const props = {
      type: 'FeatureCollection',
      totalFeatures: 1,
      features: [
        {
          type: 'Feature',
          id: 'af1b8d1c_a186_4e72_8e9e_549a8065e970.1',
          geometry: {
            type: 'MultiPolygon',
            coordinates: [
              [
                [
                  [153.29237339772322, -27.897575560605485],
                  [153.29240999654635, -27.897600934719307],
                  [153.29243164508424, -27.897612892477547],
                  [153.29242807749804, -27.89762571619733],
                  [153.2924182348173, -27.897642434997323],
                  [153.29240518208437, -27.89764887031301],
                  [153.29238402481764, -27.897632940370542],
                  [153.29236010912982, -27.897619001393466],
                  [153.29233897564296, -27.8976119164061],
                  [153.29237339772322, -27.897575560605485],
                ],
              ],
            ],
          },
          geometry_name: 'geom',
          properties: {
            rec_id: 1598139,
            status: 'CURRENT',
            asset_numb: 'BOAR320',
            type: 'Boat Ramp',
            material: 'Gravel',
            number_lan: 1,
            add_improv: 'f',
            top_rl: 0,
            toe_rl: 0,
            area_: 36.079,
            comments: 'Council use only',
            documents: '../photos/31/j31p6.jpg',
            inspectors: null,
            inspection: '2009-09-23Z',
            constructi: null,
            record_cre: '2007-04-27Z',
            last_updat: null,
            update_dat: '2011-07-22Z',
            disposal_d: null,
            positional: 'GPS Corrected 1.0M',
            level_accu: null,
            owner: '251',
            project_nu: null,
            file_numbe: null,
            folder_num: null,
            drawing_nu: null,
            survey_num: null,
            condition: 4,
            historic_c: 0,
            funding_ba: 'Non GCCC',
            mi_symbolo: 'Pen (2, 2, 65535) Brush (1, 0, 16777215)',
            mi_prinx: 1598139,
            createuser: null,
            createdate: null,
            updateuser: null,
            updatedate: null,
            shape_leng: 25.1301720763,
            shape_area: 36.0791723381,
          },
        },
      ],
    };

    const updatedProps = {
      type: 'FeatureCollection',
      totalFeatures: 2, //value changed in updated props
      features: [
        {
          type: 'Feature',
          id: 'af1b8d1c_a186_4e72_8e9e_549a8065e970.1',
          geometry: {
            type: 'MultiPolygon',
            coordinates: [
              [
                [
                  [153.29237339772322, -27.897575560605485],
                  [153.29240999654635, -27.897600934719307],
                  [153.29243164508424, -27.897612892477547],
                  [153.29242807749804, -27.89762571619733],
                  [153.2924182348173, -27.897642434997323],
                  [153.29240518208437, -27.89764887031301],
                  [153.29238402481764, -27.897632940370542],
                  [153.29236010912982, -27.897619001393466],
                  [153.29233897564296, -27.8976119164061],
                  [153.29237339772322, -27.897575560605485],
                ],
              ],
            ],
          },
          geometry_name: 'geom',
          properties: {
            rec_id: 1598139,
            status: 'CURRENT',
            asset_numb: 'BOAR320',
            type: 'Boat Ramp',
            material: 'Gravel',
            number_lan: 1,
            add_improv: 'f',
            top_rl: 0,
            toe_rl: 0,
            area_: 36.079,
            comments: 'Council use only',
            documents: '../photos/31/j31p6.jpg',
            inspectors: null,
            inspection: '2009-09-23Z',
            constructi: null,
            record_cre: '2007-04-27Z',
            last_updat: null,
            update_dat: '2011-07-22Z',
            disposal_d: null,
            positional: 'GPS Corrected 1.0M',
            level_accu: null,
            owner: '251',
            project_nu: null,
            file_numbe: null,
            folder_num: null,
            drawing_nu: null,
            survey_num: null,
            condition: 4,
            historic_c: 0,
            funding_ba: 'Non GCCC',
            mi_symbolo: 'Pen (2, 2, 65535) Brush (1, 0, 16777215)',
            mi_prinx: 1598139,
            createuser: null,
            createdate: null,
            updateuser: null,
            updatedate: null,
            shape_leng: 25.1301720763,
            shape_area: 36.0791723381,
          },
        },
      ],
    };
    const map = { data: { addGeoJson: jest.fn() } };
    const google = { maps: { Map: jest.fn(() => map) } };
    window.google = google;
    document.getElementById = jest.fn().mockReturnValueOnce('el');
    const wrapper = shallow(<Map data={props}></Map>);
    const initMapSpy = jest.spyOn(wrapper.instance(), 'initMap');
    wrapper.setProps({ data: updatedProps });
    expect(initMapSpy).toBeCalledTimes(1);
    expect(document.getElementById).toBeCalledWith('map-js');
    expect(google.maps.Map).toBeCalledWith('el', {
      center: {
        lat: -27.9959656,
        lng: 153.2879044,
      },
      zoom: 9,
    });
    expect(map.data.addGeoJson).toBeCalledWith(updatedProps);
  });
});

unit test result:

 PASS  src/stackoverflow/64635170/Map.test.js (10.908s)
  64635170
    ✓ should pass (9ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 Map.js   |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.063s

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top