Arrange docs initially to reflect new scenario and remove jest.setTimeout

Author: stevegalili

examples/cookbook/app/index.tsx

@@ -84,5 +84,5 @@ type Recipe = {
 const recipes: Recipe[] = [
   { id: 1, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
   { id: 2, title: 'Task List with Jotai', path: 'state-management/jotai/' },
-  { id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'network-requests/' },
+  { id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'advanced/' },
 ];

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

@@ -6,8 +6,6 @@ import {
   mockServerFailureForGetAllFavorites,
 } from './test-utils';
 
-jest.setTimeout(10000);
-
 describe('PhoneBook', () => {
   it('fetches all contacts and favorites successfully and renders lists in sections correctly', async () => {
     render(<PhoneBook />);

website/docs/12.x/cookbook/_meta.json

@@ -7,8 +7,8 @@
   },
   {
     "type": "dir",
-    "name": "network-requests",
-    "label": "Network Requests Recipes"
+    "name": "advanced",
+    "label": "Advanced Recipes"
   },
   {
     "type": "dir",

website/docs/12.x/cookbook/advanced/_meta.json

@@ -0,0 +1 @@
+["network-requests"]

website/docs/12.x/cookbook/network-requests/axios.md renamed to website/docs/12.x/cookbook/advanced/network-requests.md

@@ -1,39 +1,58 @@
-# Axios
+# Network Requests
 
 ## Introduction
 
-Axios is a popular library for making HTTP requests in JavaScript. It is promise-based and has a
-simple API that makes it easy to use.
-In this guide, we will show you how to mock Axios requests and guard your test suits from unwanted
-and unmocked API requests.
+Mocking network requests is an essential part of testing React Native applications. By mocking
+network
+requests, you can control the data that is returned from the server and test how your application
+behaves in different scenarios, such as when the request is successful or when it fails.
+
+In this guide, we will show you how to mock network requests and guard your test suits from unwanted
+and unmocked/unhandled network requests
 
 :::info
-To simulate a real-world scenario, we will use the [Random User Generator API](https://randomuser.me/) that provides random user data.
+To simulate a real-world scenario, we will use
+the [Random User Generator API](https://randomuser.me/) that provides random user data.
 :::
 
 ## Phonebook Example
 
-Let's assume we have a simple phonebook application that uses Axios for fetching Data from a server.
-In our case, we have a list of favorite contacts that we want to display in our application.
+Let's assume we have a simple phonebook application that
+uses [`fetch`](https://reactnative.dev/docs/network#using-fetch) for fetching Data from a server.
+In our case, we have a list of contacts and favorites that we want to display in our application.
 
 This is how the root of the application looks like:
 
 ```tsx title=network-requests/Phonebook.tsx
-import React, {useEffect, useState} from 'react';
-import {User} from './types';
+import React, { useEffect, useState } from 'react';
+import { Text } from 'react-native';
+import { User } from './types';
+import ContactsList from './components/ContactsList';
 import FavoritesList from './components/FavoritesList';
+import getAllContacts from './api/getAllContacts';
+import getAllFavorites from './api/getAllFavorites';
 
 export default () => {
+  const [usersData, setUsersData] = useState<User[]>([]);
   const [favoritesData, setFavoritesData] = useState<User[]>([]);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    const _getAllContacts = async () => {
+      const _data = await getAllContacts();
+      setUsersData(_data);
+    };
+    const _getAllFavorites = async () => {
+      const _data = await getAllFavorites();
+      setFavoritesData(_data);
+    };
+
     const run = async () => {
       try {
-        const _data = await getAllFavorites();
-        setFavoritesData(_data);
+        await Promise.all([_getAllContacts(), _getAllFavorites()]);
       } catch (e) {
-        setError(e.message);
+        const message = isErrorWithMessage(e) ? e.message : 'Something went wrong';
+        setError(message);
       }
     };
 
@@ -45,27 +64,46 @@ export default () => {
   }
 
   return (
-    <FavoritesList users={favoritesData}/>
+    <>
+      <FavoritesList users={favoritesData} />
+      <ContactsList users={usersData} />
+    </>
   );
 };
+```
 
+We fetch the contacts from the server using the `getAllFavorites` function that utilizes `fetch`.
+
+```tsx title=network-requests/api/getAllContacts.ts
+import { User } from '../types';
+
+export default async (): Promise<User[]> => {
+  const res = await fetch('https://randomuser.me/api/?results=25');
+  if (!res.ok) {
+    throw new Error(`Error fetching contacts`);
+  }
+  const json = await res.json();
+  return json.results;
+};
 ```
 
-We fetch the contacts from the server using the `getAllFavorites` function that utilizes Axios.
+We do the same for fetching the favorites, but this time limiting the results to 10.
 
 ```tsx title=network-requests/api/getAllFavorites.ts
-import axios from 'axios';
-import {User} from '../types';
+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;
 };
-
 ```
 
 Our `FavoritesList` component is a simple component that displays the list of favorite contacts and
-their avatars.
+their avatars horizontally.
 
 ```tsx title=network-requests/components/FavoritesList.tsx
 import {FlatList, Image, StyleSheet, Text, View} from 'react-native';
@@ -107,19 +145,73 @@ export default ({users}: { users: User[] }) => {
 };
 
 // Looking for styles?
-// Check examples/cookbook/app/network-requests/components/FavoritesList.tsx
+// Check examples/cookbook/app/advanced/components/FavoritesList.tsx
 const styles =
 ...
 ```
 
+Our `ContactsList` component is similar to the `FavoritesList` component, but it displays the list
+of
+all contacts vertically.
+
+```tsx title=network-requests/components/ContactsList.tsx
+import { FlatList, Image, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback } from 'react';
+import type { ListRenderItem } from '@react-native/virtualized-lists';
+import { User } from '../types';
+
+export default ({ users }: { users: User[] }) => {
+  const renderItem: ListRenderItem<User> = useCallback(
+    ({ item: { name, email, picture, cell }, index }) => {
+      const { title, first, last } = name;
+      const backgroundColor = index % 2 === 0 ? '#f9f9f9' : '#fff';
+      return (
+        <View style={[{ backgroundColor }, styles.userContainer]}>
+          <Image source={{ uri: picture.thumbnail }} style={styles.userImage} />
+          <View>
+            <Text>
+              Name: {title} {first} {last}
+            </Text>
+            <Text>Email: {email}</Text>
+            <Text>Mobile: {cell}</Text>
+          </View>
+        </View>
+      );
+    },
+    [],
+  );
+
+  if (users.length === 0) return <FullScreenLoader />;
+
+  return (
+    <View>
+      <FlatList<User>
+        data={users}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => `${index}-${item.id.value}`}
+      />
+    </View>
+  );
+};
+
+// Looking for styles or FullScreenLoader component?
+// Check examples/cookbook/app/advanced/components/ContactsList.tsx
+const FullScreenLoader = () => ...
+const styles = ...
+```
+
 ## Start testing with a simple test
-In our test we will make sure we mock the `axios.get` function to return the data we want.
-In this specific case, we will return a list of 3 users.
+
+In our test we would like to test if the `PhoneBook` component renders the `FavoritesList`
+and `ContactsList` components correctly.
+We will mock the network requests and their responses to ensure that the component behaves as
+expected. We will use [MSW (Mock Service Worker)](https://mswjs.io/docs/getting-started) to mock the network requests.
+
+```tsx title=network-requests/Phonebook.test.tsx
 
 :::info
-To prevent unexpected behavior, we ensure the following:
-- Prevent the mock from resolving data multiple times by using `mockResolvedValueOnce`.
-- Ensure the URL matches the base URL of the API by using a custom function `ensureUrlMatchesBaseUrl`.
+We recommend using the Mock Service Worker (MSW) library to declaratively mock API communication in
+ your tests instead of stubbing `fetch, or relying on third-party adapters.
 
 :::
 
@@ -179,20 +271,23 @@ const DATA: { results: User[] } = {
       cell: '123-4567-890',
     },
     // For brevity, we have omitted the rest of the users, you can still find them in
-    // examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx
+    // examples/cookbook/app/advanced/__tests__/PhoneBook.test.tsx
     ...
   ],
 };
 
 ```
 
 ## Testing error handling
-As we are dealing with network requests, we should also test how our application behaves when the API
+
+As we are dealing with network requests, we should also test how our application behaves when the
+API
 request fails. We can mock the `axios.get` function to throw an error and test if our application is
 handling the error correctly.
 
 :::note
-It is good to note that Axios throws auto. an error when the response status code is not in the range of 2xx.
+It is good to note that Axios throws auto. an error when the response status code is not in the
+range of 2xx.
 :::
 
 ```tsx title=network-requests/Phonebook.test.tsx
@@ -242,6 +337,7 @@ export default {
 ```
 
 ## Conclusion
+
 Testing a component that makes network requests with Axios is straightforward. By mocking the Axios
 requests, we can control the data that is returned and test how our application behaves in different
 scenarios, such as when the request is successful or when it fails.
@@ -252,5 +348,8 @@ and how to guard against unwanted API requests throughout your test suite.
 ## Further Reading and Alternatives
 
 Explore more powerful tools for mocking network requests in your React Native application:
-- [Axios Mock Adapter](https://github.com/ctimmerm/axios-mock-adapter): A popular library for mocking Axios calls with an extensive API, making it easy to simulate various scenarios.
-- [MSW (Mock Service Worker)](https://mswjs.io/): Great for spinning up a local test server that intercepts network requests at the network level, providing end-to-end testing capabilities.
+
+- [Axios Mock Adapter](https://github.com/ctimmerm/axios-mock-adapter): A popular library for
+  mocking Axios calls with an extensive API, making it easy to simulate various scenarios.
+- [MSW (Mock Service Worker)](https://mswjs.io/): Great for spinning up a local test server that
+  intercepts network requests at the network level, providing end-to-end testing capabilities.