Replace fetch mock with jest fetch mock

package.json

@@ -218,7 +218,6 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.34.2",
     "eslint-plugin-react-hooks": "4.6.2",
-    "fetch-mock": "9.11.0",
     "glob": "10.4.1",
     "husky": "9.0.11",
     "inspectpack": "4.7.1",

src/app/components/MostRead/Amp/index.test.tsx

@@ -1,5 +1,6 @@
+import { FetchMock } from 'jest-fetch-mock';
+
 import React from 'react';
-import fetchMock from 'fetch-mock';
 import { render, act } from '../../react-testing-library-with-providers';
 import { ServiceContextProvider } from '../../../contexts/ServiceContext';
 import AmpMostRead from '.';
@@ -16,15 +17,17 @@ const MostReadAmpWithContext = ({ service }: MostReadAmpWithContextProps) => (
   </ServiceContextProvider>
 );
 
+const fetchMock = fetch as FetchMock;
+
 describe('AmpMostRead', () => {
   afterEach(() => {
-    fetchMock.restore();
+    fetchMock.resetMocks();
   });
 
   // Testing is done in cypress as jest dom does not support/run web workers which run the amp-scripts.
 
   it('should render as expected', async () => {
-    fetchMock.mock('localhost:7080/mundo/mostread.json', mundoMostReadResponse);
+    fetchMock.mockResponseOnce(JSON.stringify(mundoMostReadResponse));
 
     const { container } = render(<MostReadAmpWithContext service="mundo" />, {
       service: 'mundo',
@@ -39,9 +42,7 @@ describe('AmpMostRead', () => {
   });
 
   it('should render fallback when fetch fails to load', async () => {
-    fetchMock.mock('localhost:7080/mundo/mostread.json', {
-      throws: 'failed fetch',
-    });
+    fetchMock.mockReject(Error('failed fetch'));
 
     const { container, getByText } = render(
       <MostReadAmpWithContext service="mundo" />,
@@ -62,12 +63,14 @@ describe('AmpMostRead', () => {
   });
 
   it('should render fallback when items are empty', async () => {
-    fetchMock.mock('localhost:7080/mundo/mostread.json', {
-      generated: '2022-05-03T14:44:35.496Z',
-      lastRecordTimeStamp: '2022-05-03T14:42:00Z',
-      firstRecordTimeStamp: '2022-05-03T14:27:00Z',
-      items: [],
-    });
+    fetchMock.mockResponseOnce(
+      JSON.stringify({
+        generated: '2022-05-03T14:44:35.496Z',
+        lastRecordTimeStamp: '2022-05-03T14:42:00Z',
+        firstRecordTimeStamp: '2022-05-03T14:27:00Z',
+        items: [],
+      }),
+    );
 
     const { container, getByText } = render(
       <MostReadAmpWithContext service="mundo" />,
@@ -88,11 +91,13 @@ describe('AmpMostRead', () => {
   });
 
   it('should render fallback when items are undefined', async () => {
-    fetchMock.mock('localhost:7080/mundo/mostread.json', {
-      generated: '2022-05-03T14:44:35.496Z',
-      lastRecordTimeStamp: '2022-05-03T14:42:00Z',
-      firstRecordTimeStamp: '2022-05-03T14:27:00Z',
-    });
+    fetchMock.mockResponseOnce(
+      JSON.stringify({
+        generated: '2022-05-03T14:44:35.496Z',
+        lastRecordTimeStamp: '2022-05-03T14:42:00Z',
+        firstRecordTimeStamp: '2022-05-03T14:27:00Z',
+      }),
+    );
 
     const { container, getByText } = render(
       <MostReadAmpWithContext service="mundo" />,

src/app/components/MostRead/Canonical/index.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import fetchMock from 'fetch-mock';
 import { data as arabicMostReadData } from '../../../../../data/arabic/mostRead/index.json';
 import { data as pidginMostReadData } from '../../../../../data/pidgin/mostRead/index.json';
 import { data as kyrgyzMostReadData } from '../../../../../data/kyrgyz/mostRead/index.json';
@@ -50,7 +49,6 @@ const MostReadCanonicalWithContext = ({
 describe('MostRead Canonical', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    fetchMock.restore();
   });
 
   [

src/app/legacy/containers/RadioSchedule/Canonical/index.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import fetchMock from 'fetch-mock';
 import arabicRadioScheduleData from '#data/arabic/bbc_arabic_radio/schedule.json';
 import { RequestContextProvider } from '#contexts/RequestContext';
 import { FRONT_PAGE } from '#app/routes/utils/pageTypes';
@@ -33,12 +32,15 @@ const RadioScheduleWithContext = ({ initialData, lang }) => (
 
 describe('Canonical RadioSchedule', () => {
   beforeEach(() => {
-    fetchMock.restore();
+    fetch.resetMocks();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   describe('With initial data', () => {
     it('renders correctly for a service', async () => {
-      fetchMock.mock(endpoint, arabicRadioScheduleData);
       const initialData = processRadioSchedule(
         arabicRadioScheduleData,
         'arabic',
@@ -51,7 +53,6 @@ describe('Canonical RadioSchedule', () => {
         ).container;
       });
       expect(container).toMatchSnapshot();
-      expect(fetchMock.calls(endpoint).length).toBeFalsy();
     });
 
     it('contains four programs for a service with a radio schedule', async () => {
@@ -63,32 +64,38 @@ describe('Canonical RadioSchedule', () => {
       let container;
 
       await act(async () => {
-        container = await render(
+        container = render(
           <RadioScheduleWithContext initialData={initialData} />,
         ).container;
       });
       expect(container.querySelectorAll('li').length).toEqual(4);
     });
 
     it('does not render when data contains less than 4 programs', async () => {
-      fetchMock.mock(endpoint, arabicRadioScheduleData.schedules.slice(0, 2));
+      const radioSchedule2Programmes = { ...arabicRadioScheduleData };
+      radioSchedule2Programmes.schedules =
+        radioSchedule2Programmes.schedules.slice(0, 2);
+
       const initialData = processRadioSchedule(
-        { schedules: arabicRadioScheduleData.schedules.slice(0, 2) },
+        radioSchedule2Programmes,
         'arabic',
         Date.now(),
       );
+
+      fetch.mockResponseOnce(JSON.stringify(radioSchedule2Programmes));
+
       let container;
 
       await act(async () => {
-        container = await render(
+        container = render(
           <RadioScheduleWithContext initialData={initialData} />,
         ).container;
       });
       expect(container).toBeEmptyDOMElement();
     });
 
     it('does not render when data contains no programs', async () => {
-      fetchMock.mock(endpoint, []);
+      fetch.mockResponseOnce(JSON.stringify([]));
       const initialData = processRadioSchedule(
         { schedules: [] },
         'arabic',
@@ -97,7 +104,7 @@ describe('Canonical RadioSchedule', () => {
       let container;
 
       await act(async () => {
-        container = await render(
+        container = render(
           <RadioScheduleWithContext initialData={initialData} />,
         ).container;
       });
@@ -107,34 +114,32 @@ describe('Canonical RadioSchedule', () => {
 
   describe('Without initial data', () => {
     it('renders correctly for a service with a radio schedule and page frequency URL', async () => {
-      fetchMock.mock(endpoint, arabicRadioScheduleData);
+      fetch.mockResponseOnce(JSON.stringify(arabicRadioScheduleData));
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext />).container;
+        container = render(<RadioScheduleWithContext />).container;
       });
 
       expect(container).toMatchSnapshot();
-      expect(fetchMock.calls(endpoint).length).toBeTruthy();
     });
 
     it('contains four programs for a service with a radio schedule', async () => {
-      fetchMock.mock(endpoint, arabicRadioScheduleData);
+      fetch.mockResponseOnce(JSON.stringify(arabicRadioScheduleData));
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext />).container;
+        container = render(<RadioScheduleWithContext />).container;
       });
       expect(container.querySelectorAll('li').length).toEqual(4);
     });
 
     it('render radio schedules container with lang code', async () => {
-      fetchMock.mock(endpoint, arabicRadioScheduleData);
+      fetch.mockResponseOnce(JSON.stringify(arabicRadioScheduleData));
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext lang="fa-AF" />)
-          .container;
+        container = render(<RadioScheduleWithContext lang="fa-AF" />).container;
       });
       expect(container.querySelector('section')).toHaveAttribute(
         'lang',
@@ -143,49 +148,52 @@ describe('Canonical RadioSchedule', () => {
     });
 
     it('does not render when data contains less than 4 programs', async () => {
-      fetchMock.mock(endpoint, {
-        schedules: arabicRadioScheduleData.schedules.slice(0, 2),
-      });
+      const radioSchedule2Programmes = { ...arabicRadioScheduleData };
+      radioSchedule2Programmes.schedules =
+        radioSchedule2Programmes.schedules.slice(0, 2);
+
+      fetch.mockResponseOnce(JSON.stringify(radioSchedule2Programmes));
+
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext />).container;
+        container = render(<RadioScheduleWithContext />).container;
       });
       expect(container).toBeEmptyDOMElement();
     });
 
     it('does not render when data contains no programs', async () => {
-      fetchMock.mock(endpoint, {
-        schedules: [],
-      });
+      fetch.mockResponseOnce(
+        JSON.stringify({
+          schedules: [],
+        }),
+      );
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext />).container;
+        container = render(<RadioScheduleWithContext />).container;
       });
       expect(container).toBeEmptyDOMElement();
     });
 
     it('does not render when data fetched returns non-ok status code', async () => {
       global.console.error = jest.fn();
-      fetchMock.mock(endpoint, 404);
+      fetch.mockResponse({ status: 404 });
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext />).container;
+        container = render(<RadioScheduleWithContext />).container;
       });
       expect(container).toBeEmptyDOMElement();
     });
 
     it('does not render when data fetch is rejected', async () => {
       global.console.error = jest.fn();
-      fetchMock.mock(endpoint, {
-        throws: 'Server not found',
-      });
+      fetch.mockRejectOnce(Error('Server not found'));
       let container;
 
       await act(async () => {
-        container = await render(<RadioScheduleWithContext />).container;
+        container = render(<RadioScheduleWithContext />).container;
       });
       expect(container).toBeEmptyDOMElement();
     });