EES-4902 Fix react-leaflet not being transpiled by Jest

src/explore-education-statistics-admin/jest.config.js

@@ -19,7 +19,7 @@ const config = {
       '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: [
-    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+    '[/\\\\]node_modules[/\\\\](?!react-leaflet)[/\\\\]',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
   moduleNameMapper: {
@@ -39,7 +39,6 @@ const config = {
     '@azure/msal-react': '<rootDir>/test/stub.js',
     'react-markdown':
       '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
-    'react-leaflet': '<rootDir>/__mocks__/reactLeafletMock.ts',
   },
   moduleFileExtensions: [
     'web.js',

src/explore-education-statistics-admin/package.json

@@ -119,6 +119,7 @@
     "babel-jest": "^29.6.1",
     "eslint": "^8.57.0",
     "eslint-webpack-plugin": "^4.0.1",
+    "intersection-observer": "^0.11.0",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "jest-junit": "^16.0.0",

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilderTabSection.test.tsx

@@ -162,7 +162,7 @@ describe('ChartBuilderTabSection', () => {
     expect(tabs).toHaveLength(5);
   });
 
-  test('calls  `getTableData` and `onTableUpdate` when change boundary level', async () => {
+  test('calls `getTableData` and `onTableUpdate` when boundary level changed', async () => {
     tableBuilderService.getTableData.mockResolvedValue(testTableData);
 
     const handleUpdate = jest.fn();

src/explore-education-statistics-admin/test/setupTests.js

@@ -9,4 +9,5 @@ jest.setTimeout(10000);
 if (typeof window !== 'undefined') {
   // fetch polyfill for making API calls.
   require('cross-fetch');
+  require('intersection-observer');
 }

src/explore-education-statistics-common/jest.config.js

@@ -18,7 +18,7 @@ const config = {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/test/fileTransform.js',
   },
   transformIgnorePatterns: [
-    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+    '[/\\\\]node_modules[/\\\\](?!react-leaflet)[/\\\\]',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
   moduleNameMapper: {
@@ -28,7 +28,6 @@ const config = {
     '^axios$': '<rootDir>/node_modules/axios/dist/axios.js',
     'react-markdown':
       '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
-    'react-leaflet': '<rootDir>/__mocks__/reactLeafletMock.ts',
   },
   moduleFileExtensions: [
     'web.js',

src/explore-education-statistics-common/package.json

@@ -26,7 +26,6 @@
     "identity-obj-proxy": "^3.0.0",
     "iframe-resizer-react": "^1.0.4",
     "immer": "^10.0.2",
-    "intersection-observer": "^0.11.0",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "memoizee": "^0.4.14",
@@ -71,6 +70,7 @@
     "@types/sanitize-html": "^2.9.0",
     "@types/uuid": "^8.3.0",
     "eslint": "^8.57.0",
+    "intersection-observer": "^0.11.0",
     "jest": "^29.6.1",
     "jest-junit": "^16.0.0",
     "jest-matcher-utils": "^29.6.1",

src/explore-education-statistics-common/src/modules/charts/components/MapGeoJSON.tsx

@@ -157,7 +157,9 @@ export default function MapGeoJSON({
 
   return (
     <>
-      {ukGeometry && (
+      {ukGeometry && Leaflet.Browser.svg && (
+        // Don't render the UK's GeoJSON if the browser doesn't support SVGs.
+        // This is needed in Jest tests or an error is thrown.
         <GeoJSON
           data={ukGeometry}
           interactive={false}

src/explore-education-statistics-common/src/modules/charts/components/__tests__/MapBlock.test.tsx

@@ -21,10 +21,6 @@ const tableBuilderService = _tableBuilderService as jest.Mocked<
   typeof _tableBuilderService
 >;
 
-// EES-4902 react leaflet now uses ESM so unable to test this currently.
-// It's stubbed out in the mocks folder.
-// Tests are skipped or partially commented out when they
-// are testing the maps directly.
 describe('MapBlock', () => {
   const testFullTable = mapFullTable(testMapTableData);
   const testBlockProps: MapBlockProps = {
@@ -43,29 +39,28 @@ describe('MapBlock', () => {
     tableBuilderService.getLocationGeoJson.mockResolvedValue(
       testMapTableData.subjectMeta.locations,
     );
-    render(<MapBlock {...testBlockProps} />);
 
-    // await waitFor(() => {
-    //   const paths = container.querySelectorAll<HTMLElement>(
-    //     '.leaflet-container svg:not(.leaflet-attribution-flag) path',
-    //   );
+    const { container } = render(<MapBlock {...testBlockProps} />);
 
-    //   expect(paths).toHaveLength(4);
+    await waitFor(() => {
+      const paths = container.querySelectorAll<HTMLElement>(
+        '.leaflet-container svg:not(.leaflet-attribution-flag) path',
+      );
 
-    //   // Location polygons
-    //   expect(paths[0]).toHaveAttribute('fill', 'rgba(145, 161, 201, 1)');
-    //   expect(paths[1]).toHaveAttribute('fill', 'rgba(218, 224, 237, 1)');
-    //   expect(paths[2]).toHaveAttribute('fill', 'rgba(71, 99, 165, 1)');
-    //   // UK polygon
-    //   expect(paths[3]).toHaveAttribute('fill', '#003078');
-    // });
+      expect(paths).toHaveLength(4);
 
-    await waitFor(() => {
-      expect(
-        screen.getByLabelText('1. Select data to view'),
-      ).toBeInTheDocument();
+      // Location polygons
+      expect(paths[0]).toHaveAttribute('fill', 'rgba(145, 161, 201, 1)');
+      expect(paths[1]).toHaveAttribute('fill', 'rgba(218, 224, 237, 1)');
+      expect(paths[2]).toHaveAttribute('fill', 'rgba(71, 99, 165, 1)');
+      // UK polygon
+      expect(paths[3]).toHaveAttribute('fill', '#003078');
     });
 
+    expect(
+      await screen.findByLabelText('1. Select data to view'),
+    ).toBeInTheDocument();
+
     const legendItems = screen.getAllByTestId('mapBlock-legend-item');
 
     expect(legendItems).toHaveLength(5);
@@ -199,7 +194,7 @@ describe('MapBlock', () => {
     expect(legendColours[4].style.backgroundColor).toBe('rgb(245, 164, 80)');
   });
 
-  test.skip('changing selected location focuses the correct polygon', async () => {
+  test('changing selected location focuses the correct polygon', async () => {
     tableBuilderService.getLocationGeoJson.mockResolvedValue(
       testMapTableData.subjectMeta.locations,
     );
@@ -221,17 +216,18 @@ describe('MapBlock', () => {
     expect(group1Options[0]).toHaveTextContent('Leeds');
 
     await userEvent.selectOptions(select, group1Options[0]);
+
     const paths = container.querySelectorAll<HTMLElement>(
-      '.leaflet-container svg:not(.leaflet-attribution-flag) path',
+      '.leaflet-container svg:not(.leaflet-attribution-flag) path.leaflet-interactive',
     );
 
-    expect(paths).toHaveLength(4);
+    expect(paths).toHaveLength(3);
 
     // Location polygons
     // selected polygon has a wider border.
-    expect(paths[0]).toHaveAttribute('stroke-width', '3');
+    expect(paths[0]).toHaveAttribute('stroke-width', '1');
     expect(paths[1]).toHaveAttribute('stroke-width', '1');
-    expect(paths[2]).toHaveAttribute('stroke-width', '1');
+    expect(paths[2]).toHaveAttribute('stroke-width', '3');
   });
 
   test('changing selected location renders its indicator tile', async () => {
@@ -331,7 +327,7 @@ describe('MapBlock', () => {
     ).toHaveTextContent('4.01%');
   });
 
-  test.skip('resetting the map when select None Selected', async () => {
+  test('resetting the map when no location selected', async () => {
     tableBuilderService.getLocationGeoJson.mockResolvedValue(
       testMapTableData.subjectMeta.locations,
     );
@@ -353,17 +349,23 @@ describe('MapBlock', () => {
     await userEvent.selectOptions(select, group1Options[0]);
 
     const paths = container.querySelectorAll<HTMLElement>(
-      '.leaflet-container svg:not(.leaflet-attribution-flag) path',
+      '.leaflet-container svg:not(.leaflet-attribution-flag) path.leaflet-interactive',
     );
 
-    expect(paths[0]).toHaveAttribute('stroke-width', '3');
+    expect(paths).toHaveLength(3);
+    expect(paths[0]).toHaveAttribute('stroke-width', '1');
+    expect(paths[1]).toHaveAttribute('stroke-width', '1');
+    expect(paths[2]).toHaveAttribute('stroke-width', '3');
 
     await userEvent.selectOptions(
       select,
       within(select).getAllByRole('option')[0],
     );
 
     expect(paths[0]).toHaveAttribute('stroke-width', '1');
+    expect(paths[1]).toHaveAttribute('stroke-width', '1');
+    // Stroke width is reset
+    expect(paths[2]).toHaveAttribute('stroke-width', '1');
   });
 
   test('ensure values with decimal places go are assigned the correct colour when the legend values are set to 0 decimal places', async () => {

src/explore-education-statistics-common/src/modules/find-statistics/components/__tests__/DataBlockTabs.test.tsx

@@ -342,8 +342,7 @@ describe('DataBlockTabs', () => {
     });
   });
 
-  // EES-4902 react-leaflet now uses ESM so unable to test this currently
-  test.skip('renders map', async () => {
+  test('renders map', async () => {
     tableBuilderService.getDataBlockTableData.mockResolvedValue(
       testMapTableData,
     );

src/explore-education-statistics-common/test/setupTests.js

@@ -9,6 +9,7 @@ jest.setTimeout(10000);
 if (typeof window !== 'undefined') {
   // fetch polyfill for making API calls.
   require('cross-fetch');
+  require('intersection-observer');
 }
 
 // fix for jsdom not working with SVGs
@@ -27,5 +28,3 @@ global.document.createElementNS = function (namespaceURI, qualifiedName) {
   // eslint-disable-next-line prefer-rest-params
   return createElementNSOrig.apply(this, arguments);
 };
-
-require('intersection-observer');

src/explore-education-statistics-frontend/jest.config.js

@@ -22,6 +22,9 @@ const config = {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
       '<rootDir>/../explore-education-statistics-common/test/fileTransform.js',
   },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\](?!react-leaflet)[/\\\\]',
+  ],
   moduleNameMapper: {
     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
     '^@frontend/(.*)$': '<rootDir>/src/$1',
@@ -32,7 +35,6 @@ const config = {
     '^axios$': '<rootDir>/node_modules/axios/dist/axios.js',
     'react-markdown':
       '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
-    'react-leaflet': '<rootDir>/__mocks__/reactLeafletMock.ts',
   },
   moduleFileExtensions: [
     'web.js',

src/explore-education-statistics-frontend/package.json

@@ -60,6 +60,7 @@
     "eslint-webpack-plugin": "^4.0.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "identity-obj-proxy": "3.0.0",
+    "intersection-observer": "^0.11.0",
     "jest": "^29.6.1",
     "jest-junit": "^12.0.0",
     "jest-mock-extended": "^3.0.4",

src/explore-education-statistics-frontend/test/setupTests.js

@@ -13,6 +13,7 @@ jest.setTimeout(10000);
 if (typeof window !== 'undefined') {
   // fetch polyfill for making API calls.
   require('cross-fetch');
+  require('intersection-observer');
 }
 
 global.Request = jest.requireActual('node-fetch').Request;