Stabilize Node 24 map tests by removing Leaflet DOM snapshot coupling

test/visits/helpers/MapModal.test.tsx

@@ -1,14 +1,28 @@
+import type { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import { MapModal } from '../../../src/visits/helpers/MapModal';
 import type { CityStats } from '../../../src/visits/types';
 import { checkAccessibility } from '../../__helpers__/accessibility';
 
+vi.mock('react-leaflet', () => ({
+  MapContainer: ({ children }: PropsWithChildren) => (
+    <div role="region" aria-label="Map">
+      {children}
+    </div>
+  ),
+  Marker: ({ children }: PropsWithChildren) => <div data-testid="marker">{children}</div>,
+  Popup: ({ children }: PropsWithChildren) => <>{children}</>,
+  TileLayer: () => null,
+}));
+
 describe('<MapModal />', () => {
   const toggle = vi.fn();
   const zaragozaLat = 41.6563497;
   const zaragozaLong = -0.876566;
   const newYorkLat = 40.73061;
   const newYorkLong = -73.935242;
+  const londonLat = 51.5072;
+  const londonLong = -0.1276;
   const locations: CityStats[] = [
     {
       cityName: 'Zaragoza',
@@ -21,12 +35,31 @@ describe('<MapModal />', () => {
       latLong: [newYorkLat, newYorkLong],
     },
   ];
-  const setUp = () => render(<MapModal toggle={toggle} isOpen title="Foobar" locations={locations} />);
+  const setUp = (locationsToRender = locations) =>
+    render(<MapModal toggle={toggle} isOpen title="Foobar" locations={locationsToRender} />);
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders expected map', () => {
     setUp();
-    expect(screen.getByRole('dialog')).toMatchSnapshot();
+    const dialog = screen.getByRole('dialog');
+    const [zaragozaMarker, newYorkMarker] = screen.getAllByTestId('marker');
+
+    expect(dialog).toContainElement(screen.getByRole('heading', { name: 'Foobar' }));
+    expect(screen.getByRole('region', { name: 'Map' })).toBeInTheDocument();
+    expect(zaragozaMarker).toHaveTextContent('54 visits from Zaragoza');
+    expect(newYorkMarker).toHaveTextContent('7 visits from New York');
+  });
+
+  it('renders singular accessible labels for one-visit markers', () => {
+    setUp([
+      {
+        cityName: 'London',
+        count: 1,
+        latLong: [londonLat, londonLong],
+      },
+    ]);
+
+    expect(screen.getByTestId('marker')).toHaveTextContent('1 visit from London');
   });
 });

test/visits/helpers/OpenMapModalBtn.test.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import type { UserEvent } from '@testing-library/user-event';
 import { fromPartial } from '@total-typescript/shoehorn';
@@ -6,6 +7,17 @@ import type { CityStats } from '../../../src/visits/types';
 import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
+vi.mock('react-leaflet', () => ({
+  MapContainer: ({ children }: PropsWithChildren) => (
+    <div role="region" aria-label="Map">
+      {children}
+    </div>
+  ),
+  Marker: ({ children }: PropsWithChildren) => <div data-testid="marker">{children}</div>,
+  Popup: ({ children }: PropsWithChildren) => <>{children}</>,
+  TileLayer: () => null,
+}));
+
 describe('<OpenMapModalBtn />', () => {
   const title = 'Foo';
   const locations: CityStats[] = [
@@ -61,6 +73,6 @@ describe('<OpenMapModalBtn />', () => {
     await user.click(screen.getByRole('menuitem', { name }));
     await screen.findByRole('dialog');
 
-    expect(screen.getAllByAltText('Marker')).toHaveLength(expectedMarkers);
+    expect(screen.getAllByTestId('marker')).toHaveLength(expectedMarkers);
   });
 });