use MSW for all API calls in cookbook test suits

Author: stevegalili

examples/cookbook/__mocks__/axios.ts

@@ -2,48 +2,34 @@ import { render, screen, waitForElementToBeRemoved } from '@testing-library/reac
 import React from 'react';
 import PhoneBook from '../PhoneBook';
 import {
-  mockAxiosGetWithFailureResponse,
-  mockAxiosGetWithSuccessResponse,
-  mockFetchWithFailureResponse,
-  mockFetchWithSuccessResponse,
+  mockServerFailureForGetAllContacts,
+  mockServerFailureForGetAllFavorites,
 } from './test-utils';
 
 jest.setTimeout(10000);
 
 describe('PhoneBook', () => {
-  it('fetches contacts successfully and renders in list', async () => {
-    mockFetchWithSuccessResponse();
-    mockAxiosGetWithSuccessResponse();
+  it('fetches all contacts and favorites successfully and renders lists in sections correctly', async () => {
     render(<PhoneBook />);
 
     await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
     expect(await screen.findByText('Name: Mrs Ida Kristensen')).toBeOnTheScreen();
     expect(await screen.findByText('Email: [email protected]')).toBeOnTheScreen();
     expect(await screen.findAllByText(/name/i)).toHaveLength(3);
+    expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();
+    expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);
   });
 
-  it('fails to fetch contacts and renders error message', async () => {
-    mockFetchWithFailureResponse();
-    mockAxiosGetWithSuccessResponse();
+  it('fails to fetch all contacts and renders error message', async () => {
+    mockServerFailureForGetAllContacts();
     render(<PhoneBook />);
 
     await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
     expect(await screen.findByText(/error fetching contacts/i)).toBeOnTheScreen();
   });
 
-  it('fetches favorites successfully and renders all users avatars', async () => {
-    mockFetchWithSuccessResponse();
-    mockAxiosGetWithSuccessResponse();
-    render(<PhoneBook />);
-
-    await waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));
-    expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();
-    expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);
-  });
-
   it('fails to fetch favorites and renders error message', async () => {
-    mockFetchWithSuccessResponse();
-    mockAxiosGetWithFailureResponse();
+    mockServerFailureForGetAllFavorites();
     render(<PhoneBook />);
 
     await waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx

@@ -1,58 +1,52 @@
 import { User } from '../types';
-import axios from 'axios';
+import {http, HttpResponse} from "msw";
+import {setupServer} from "msw/node";
 
-class MismatchedUrlError extends Error {
-  constructor(url: string) {
-    super(`The URL: ${url} does not match the API's base URL.`);
-  }
-}
+const handlers = [
+  http.get('https://randomuser.me/api/*', () => {
+    return HttpResponse.json(DATA);
+  }),
+];
 
-/**
- * Ensures that the URL matches the base URL of the API.
- * @param url
- * @throws {MismatchedUrlError}
- */
-const ensureUrlMatchesBaseUrl = (url: string) => {
-  if (!url.includes('https://randomuser.me/api')) throw new MismatchedUrlError(url);
-};
-
-export const mockFetchWithSuccessResponse = () => {
-  (global.fetch as jest.Mock).mockImplementationOnce((url) => {
-    ensureUrlMatchesBaseUrl(url);
-
-    return Promise.resolve({
-      ok: true,
-      json: jest.fn().mockResolvedValueOnce(DATA),
-    });
-  });
-};
+export const server = setupServer(...handlers);
 
-export const mockFetchWithFailureResponse = () => {
-  (global.fetch as jest.Mock).mockImplementationOnce((url) => {
-    ensureUrlMatchesBaseUrl(url);
+export const mockServerFailureForGetAllContacts = () => {
+  server.use(
+    http.get('https://randomuser.me/api/', ({ request }) => {
+      // Construct a URL instance out of the intercepted request.
+      const url = new URL(request.url);
+      // Read the "results" URL query parameter using the "URLSearchParams" API.
+      const resultsLength = url.searchParams.get('results');
+      // Simulate a server error for the get all contacts request.
+      // We check if the "results" query parameter is set to "25"
+      // to know it's the correct request to mock, in our case get all contacts.
+      if (resultsLength === '25') {
+        return new HttpResponse(null, { status: 500 });
+      }
 
-    return Promise.resolve({
-      ok: false,
-    });
-  });
+      return HttpResponse.json(DATA);
+    }),
+  );
 };
 
-export const mockAxiosGetWithSuccessResponse = () => {
-  (axios.get as jest.Mock).mockImplementationOnce((url) => {
-    ensureUrlMatchesBaseUrl(url);
+export const mockServerFailureForGetAllFavorites = () => {
+  server.use(
+    http.get('https://randomuser.me/api/', ({ request }) => {
+      // Construct a URL instance out of the intercepted request.
+      const url = new URL(request.url);
+      // Read the "results" URL query parameter using the "URLSearchParams" API.
+      const resultsLength = url.searchParams.get('results');
+      // Simulate a server error for the get all favorites request.
+      // We check if the "results" query parameter is set to "10"
+      // to know it's the correct request to mock, in our case get all favorites.
+      if (resultsLength === '10') {
+        return new HttpResponse(null, { status: 500 });
+      }
 
-    return Promise.resolve({ data: DATA });
-  });
+      return HttpResponse.json(DATA);
+    }),
+  );
 };
-
-export const mockAxiosGetWithFailureResponse = () => {
-  (axios.get as jest.Mock).mockImplementationOnce((url) => {
-    ensureUrlMatchesBaseUrl(url);
-
-    return Promise.reject({ message: 'Error fetching favorites' });
-  });
-};
-
 export const DATA: { results: User[] } = {
   results: [
     {

examples/cookbook/app/network-requests/__tests__/test-utils.ts

@@ -1,7 +1,10 @@
-import axios from 'axios';
 import { User } from '../types';
 
 export default async (): Promise<User[]> => {
-  const res = await axios.get('https://randomuser.me/api/?results=10');
-  return res.data.results;
+  const res = await fetch('https://randomuser.me/api/?results=10');
+  if (!res.ok) {
+    throw new Error(`Error fetching favorites`);
+  }
+  const json = await res.json();
+  return json.results;
 };

examples/cookbook/app/network-requests/api/getAllFavorites.ts

@@ -2,20 +2,11 @@
 
 // Import built-in Jest matchers
 import '@testing-library/react-native/extend-expect';
+import { server } from './app/network-requests/__tests__/test-utils';
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
-// Guard against API requests made during testing
-beforeAll(() => {
-  // the global fetch function:
-  jest.spyOn(global, 'fetch').mockImplementation(()=> {
-    throw Error("Please ensure you mock 'fetch' Only Chuck Norris is allowed to make API requests when testing ;)");
-  });
-  // with Axios:
-  // see examples/cookbook/__mocks__/axios.ts
-});
-afterAll(() => {
-  // restore the original fetch function
-  (global.fetch as jest.Mock).mockRestore();
-});
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());

examples/cookbook/jest-setup.ts

@@ -11,7 +11,6 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "axios": "^1.7.5",
     "expo": "^51.0.26",
     "expo-constants": "~16.0.2",
     "expo-linking": "~6.3.1",
@@ -38,6 +37,7 @@
     "@types/react-native-get-random-values": "^1",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
+    "msw": "^2.4.4",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },