src/App.js

@@ -1,4 +1,10 @@
+import RestaurantScreen from './components/RestaurantScreen';
 export default function App()
 {
-  return <div>Hello, World</div>
+  return 
+  (
+    <div>
+      <RestaurantScreen />
+    </div>
+  )
 }

src/components/RestaurantList.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export default function RestaurantList({ loadRestaurants })
+{
+    useEffect(() => { loadRestaurants(); }, [loadRestaurants]);
+    return 
+    (
+
+        <div>RestaurantList</div>
+    )
+}

src/components/RestaurantList.spec.js

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import RestaurantList from './RestaurantList';
+
+describe('RestaurantList', () =>
+{
+    it('loads restaurants on first render', () =>
+    {
+        const loadRestaurants = jest.fn().mockName('loadRestaurnats');
+        render(<RestaurantList loadRestaurants={loadRestaurants} />);
+        expect(loadRestaurants).toHaveBeenCalled();
+    });
+});

src/components/RestaurantScreen.js

@@ -0,0 +1,13 @@
+import RestaurantList from "./RestaurantList";
+
+export default function RestaurantScreen()
+{
+    return 
+    (
+        <div>
+            <h1>Restaurants</h1>
+            <RestaurantList />
+        </div>
+        
+    )
+}