Как протестировать компоненет react?

Question

[magary4]

есть следующий компонент

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

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

какие тесты можно для него написать?
Приходит в голову только мокнуть RecipeItem ну и посмотреть что отрендерилось столько моков сколько пришло в recipes
что еще можно?

Answer 1

[Павел Диденко]

Т.к. тут компонент без какой-либо логики вообще, я бы сделал только снэпшот. Либо вообще не делал бы для него тестов

Answer 2

[Robur]

Чтобы что-то протестировать, надо решить что вы будете тестировать.
Чтобы решить что вы будете тестировать, надо найти что может внезапно поломаться.

Что вы хотите протестировать в этом компоненте такого, что
1. относится к логике этого компонента
2. может незаметно сломаться
3. настолько важно чтобы окупить затраты по написанию-сопровождению теста?

присваивание переменной? это ломаться не должно.
Работу .map (тот пример что вы описали)? это внешняя логика, да и вообще - встроенный функционал.
То что в Recipe вы передаете recipe? это не может сломаться, пока вы сознательно не удалите. В этот момент тест тоже станет не валидным, и он вам ничем не поможет, его надо будет менять.

В общем - не надо его тестировать. Разве что для тренировки, попробовать как оно.