Migrated MapModal test to react testing library

test/visits/helpers/MapModal.test.tsx

@@ -1,14 +1,9 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Marker, Popup } from 'react-leaflet';
-import { Modal } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
 import { MapModal } from '../../../src/visits/helpers/MapModal';
 import { CityStats } from '../../../src/visits/types';
 
 describe('<MapModal />', () => {
-  let wrapper: ShallowWrapper;
-  const toggle = () => '';
-  const isOpen = true;
-  const title = 'Foobar';
+  const toggle = jest.fn();
   const zaragozaLat = 41.6563497;
   const zaragozaLong = -0.876566;
   const newYorkLat = 40.730610;
@@ -26,36 +21,8 @@ describe('<MapModal />', () => {
     },
   ];
 
-  beforeEach(() => {
-    wrapper = shallow(<MapModal toggle={toggle} isOpen={isOpen} title={title} locations={locations} />);
-  });
-
-  afterEach(() => wrapper.unmount());
-
-  it('renders modal with provided props', () => {
-    const modal = wrapper.find(Modal);
-    const header = wrapper.find('.map-modal__modal-title');
-
-    expect(modal.prop('toggle')).toEqual(toggle);
-    expect(modal.prop('isOpen')).toEqual(isOpen);
-    expect(header.find('.btn-close').prop('onClick')).toEqual(toggle);
-    expect(header.text()).toContain(title);
-  });
-
-  it('renders open street map tile', () => {
-    expect(wrapper.find('OpenStreetMapTile')).toHaveLength(1);
-  });
-
-  it('renders proper amount of markers', () => {
-    const markers = wrapper.find(Marker);
-
-    expect(markers).toHaveLength(locations.length);
-    locations.forEach(({ latLong, count, cityName }, index) => {
-      const marker = markers.at(index);
-      const popup = marker.find(Popup);
-
-      expect(marker.prop('position')).toEqual(latLong);
-      expect(popup.text()).toEqual(`${count} visits from ${cityName}`);
-    });
+  it('renders expected map', () => {
+    render(<MapModal toggle={toggle} isOpen title="Foobar" locations={locations} />);
+    expect(screen.getByRole('dialog')).toMatchSnapshot();
   });
 });