2 behaviors passing

src/components/RestaurantList.js

@@ -1,11 +1,17 @@
 import { useEffect } from "react";
 
-export default function RestaurantList({ loadRestaurants })
+export default function RestaurantList({ loadRestaurants, restaurants })
 {
-    useEffect(() => { loadRestaurants(); }, [loadRestaurants]);
-    return 
-    (
-
-        <div>RestaurantList</div>
-    )
-}
+    useEffect(() => 
+    { 
+        loadRestaurants(); 
+    }, [loadRestaurants]);
+    return (
+        <ul>
+            {restaurants.map(restaurant => 
+            (
+                <li key={restaurant.id}>{restaurant.name}</li>
+            ))}
+        </ul>
+    );
+};

src/components/RestaurantList.spec.js

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import RestaurantList from './RestaurantList';
 
 describe('RestaurantList', () =>
@@ -6,7 +6,20 @@ describe('RestaurantList', () =>
     it('loads restaurants on first render', () =>
     {
         const loadRestaurants = jest.fn().mockName('loadRestaurnats');
-        render(<RestaurantList loadRestaurants={loadRestaurants} />);
+        const restaurants = [];
+        render(<RestaurantList loadRestaurants={loadRestaurants} restaurants={restaurants} />);
         expect(loadRestaurants).toHaveBeenCalled();
     });
+    it('displays the restaurants', () =>
+    {
+        const noop = () => {}; //"no operation"
+        const restaurants = 
+        [
+            {id: 1, name: 'Sushi Place'},
+            {id: 2, name: 'Pizza Place'}
+        ];
+        render(<RestaurantList loadRestaurants={noop} restaurants={restaurants} />);
+        expect(screen.getByText('Sushi Place')).toBeInTheDocument();
+        expect(screen.getByText('Pizza Place')).toBeInTheDocument();
+    })
 });