How to test react component?

Question

Unit testing

have the following component

const RecipeOverview = () => {
  const { recipes } = useContext(Context);

  return (
    <div className="recipe-overview">
      {recipes.map(recipe => <RecipeItem recipe={recipe} key={recipe.id} />)}
    </div>
  );
};

what tests can be written for it?
It only comes to mind to wet the RecipeItem well and see that as many mocks were rendered as came in recipes,
what else can I do?

Answer 1

Because there is a component without any logic at all, I would only take a snapshot. Or would not do tests for him at all

Answer 2

To test something, you need to decide what you will test.
To decide what you will test, you need to find what can suddenly break.
What do you want to test in this component that
1. relates to the logic of this component
2. can break silently
3. is important enough to justify the cost of writing and maintaining the test?
variable assignment? it shouldn't break.
Work .map (that example that you described)? this is external logic, and indeed - built-in functionality.
The fact that in Recipe you pass the recipe? it cannot break unless you deliberately remove it. At this point, the test will also become invalid, and it will not help you in any way, it will have to be changed.
In general, you don't need to test it. Unless for training, try how it is.