Test harness and proper mocking

Author: vanGalilea

examples/cookbook/__mocks__/axios.ts

@@ -0,0 +1,13 @@
+const chuckNorrisError = () => {
+  throw Error(
+    "Please ensure you mock 'Axios' - Only Chuck Norris is allowed to make API requests when testing ;)",
+  );
+};
+
+export default {
+  get: jest.fn(chuckNorrisError),
+  post: jest.fn(chuckNorrisError),
+  put: jest.fn(chuckNorrisError),
+  delete: jest.fn(chuckNorrisError),
+  request: jest.fn(chuckNorrisError),
+};

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

@@ -2,37 +2,17 @@ import { render, screen, waitForElementToBeRemoved } from '@testing-library/reac
 import React from 'react';
 import PhoneBook from '../PhoneBook';
 import { User } from '../types';
+import axios from 'axios';
 
-// Ensure that the global fetch function is mocked in your setup file
-// before running the tests. This will ensure that the tests don't
-// make any actual network requests that you haven't mocked.
-beforeAll(() => {
-  jest.spyOn(global, 'fetch').mockImplementation(
-    jest.fn(() => {
-      throw Error('Only Chuck Norris is allowed to make API requests when testing ;)');
-    }),
-  );
-});
-
-afterAll(() => {
-  (global.fetch as jest.Mock).mockRestore();
-});
+jest.mock('axios');
+const mockedAxios = axios as jest.Mocked<typeof axios>;
 
 describe('PhoneBook', () => {
-  let originalFetch: typeof global.fetch;
-  beforeAll(() => {
-    originalFetch = global.fetch;
-    global.fetch = jest.fn().mockResolvedValueOnce({
+  it('fetches contacts successfully and renders in list', async () => {
+    (global.fetch as jest.SpyInstance).mockResolvedValueOnce({
       json: jest.fn().mockResolvedValueOnce(DATA),
     });
-    //TODO: mock axios
-  });
-
-  afterAll(() => {
-    global.fetch = originalFetch;
-  });
-
-  it('fetches contacts successfully and renders in list', async () => {
+    (mockedAxios.get as jest.Mock).mockResolvedValue({ data: DATA });
     render(<PhoneBook />);
 
     await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
@@ -42,11 +22,15 @@ describe('PhoneBook', () => {
   });
 
   it('fetches favorites successfully and renders in list', async () => {
+    (global.fetch as jest.SpyInstance).mockResolvedValueOnce({
+      json: jest.fn().mockResolvedValueOnce(DATA),
+    });
+    (mockedAxios.get as jest.Mock).mockResolvedValue({ data: DATA });
     render(<PhoneBook />);
 
     await waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));
     expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();
-    expect(await screen.findAllByText(/name/i)).toHaveLength(3);
+    expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);
   });
 });
 

examples/cookbook/app/network-requests/components/FavoritesList.tsx

@@ -7,7 +7,11 @@ export default ({ users }: { users: User[] }) => {
   const renderItem: ListRenderItem<User> = useCallback(({ item: { picture } }) => {
     return (
       <View style={styles.userContainer}>
-        <Image source={{ uri: picture.thumbnail }} style={styles.userImage} />
+        <Image
+          source={{ uri: picture.thumbnail }}
+          style={styles.userImage}
+          accessibilityLabel={'favorite-contact-avatar'}
+        />
       </View>
     );
   }, []);

examples/cookbook/jest-setup.ts

@@ -5,3 +5,16 @@ import '@testing-library/react-native/extend-expect';
 
 // 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(() => {
+  (global.fetch as jest.Mock).mockRestore();
+});