Refactor your application so that you have a single component that displays normal (non-cooking-mode) recipes. The component should take props as input to control what recipe data is displayed. Note that you already use prop passing like this in your grocery list (the Item component takes props, and a list of Item components are displayed in the GroceryList component).
This will have a few benefits:
It sets you up to more easily display dynamic recipe data when you move the recipe data to the backend
It will significantly reduce the number of tests you need to write and maintain
It will reduce duplication, which reduces the possibility of copy/paste errors and the effort involved in updating a recipe page.
Walk through this tutorial: https://react.dev/learn/passing-props-to-a-component.
Refactor your application so that you have a single component that displays normal (non-cooking-mode) recipes. The component should take props as input to control what recipe data is displayed. Note that you already use prop passing like this in your grocery list (the Item component takes props, and a list of Item components are displayed in the GroceryList component).
This will have a few benefits: