Implementing the menu list

Even a basic menu list featuring just the names of pizzas can be valuable for customers who are looking to browse and decide what to eat. While The Code Oven may not be set up for online ordering yet, it serves as a useful starting point.

Looking at the second task on our list, we can write our second test like so:

it("renders menu list", () => {
  render(<PizzaShopApp />);
  const menuList = screen.getByRole('list');
  const menuItems = within(menuList).getAllByRole('listitem');
  expect(menuItems.length).toEqual(8);
});

This test starts by rendering the component. Then, it identifies the HTML element tagged with the list role from the rendered component. Using the within function, it narrows down the search to only that list and locates all items within it tagged with listitem. Finally, it asserts that the number of such items should be equal to 8 (the number of items...