Должен ли я проверить, передает ли компонент «макета оболочки» реквизиты дочерним компонентам, которые уже были протестированы?

Question

Я создаю страницу блога, в ней есть компоненты Sidebar и Posts, оба проходят модульное тестирование, чтобы проверить, отображают ли они правильные данные, передаваемые реквизитами (оба являются чистыми компонентами).

Мне пришлось создать компонент-оболочку с именем BlogLayout, потому что в некоторых местах я повторял некоторый код.BlogLayout получает сообщения и категории как реквизиты, которые затем просто передаются компонентам Sidebar и Posts, и просто визуализирует оба компонента с некоторыми стилями.

Проблема заключается в следующем: Я не знаю, как я должен тестировать компонент BlogLayout.Его цель - передавать полученные реквизиты только компонентам Sidebar и Posts (он будет передавать категории и посты как реквизиты).

Мои замечания и вопросы относительно ситуации:

• Если я проверю, отображает ли BlogLayout категории и сообщения (как данные пользовательского интерфейса), я просто повторю те же самые тесты, которые были у меня в обоих компонентах.Стоит ли мне это делать в любом случае?

• Если я решу не проверять это, потому что это просто повторяющийся код, у меня могут возникнуть проблемы в случае, если я не передам эти реквизиты компонентам.Они будут работать как единицы, но не будут работать вместе в приложении.

• Мое решение было бы для модульного теста BlogLayout, чтобы ТОЛЬКО проверить, передает ли он правильные реквизиты дочерним компонентам.Таким образом, у меня был бы намного более простой тест, так как зная, что реквизиты были переданы, я могу быть полностью уверен, что дочерние компоненты будут обрабатывать его должным образом, так как они проверены для этого.Это возможно?

Я использую react-testing-library для тестов.

Любой вклад, который поможет мне найти лучшее решение, высоко ценится, яэто далеко не опытный разработчик тестов, поэтому у меня могут быть некоторые неправильные мысли о них здесь.

Большое спасибо!

Answer 1

В итоге я использовал Enzyme, чтобы проверить, передавались ли реквизиты компонентам, поэтому окончательный тест закончился так:

it(`passes down the correct props to child components`, () => {
  const wrapper = shallow(<BlogLayout {...props} />);
  expect(wrapper.find(Sidebar).props().categories).toMatchObject(props.categories);
  expect(wrapper.find(Sidebar).props().currentCategory).toMatchObject(props.currentCategory);
});

Я представлял, что лучший способ протестировать этот компонент - просто проверить, передаются ли правильные реквизиты его дочерним элементам. Но чтобы сделать это, используя react-testing-library, я бы просто повторил модульные тесты, уже определенные в обоих дочерних компонентах (они проверены на правильность рендеринга своих реквизитов). Таким образом, Enzyme помогает мне найти экземпляр каждого дочернего компонента и просто проверить, совпадают ли их реквизиты с пропуском для тестируемого компонента.

Таким образом, я не повторяю себя в разных тестах и ​​все еще уверен, что мое приложение работает как положено.

Если у кого-то есть еще мысли по поводу этого или лучшего решения, я был бы очень рад попытаться обновить правильный ответ, если я считаю, что он действительно лучше.

Answer 2

Относительно вашего первого пункта: Например, если у вас есть 2 реквизита:

• категории - реквизит
• сообщений - реквизит

Вы должны пройти обареквизит в декларации - обертка.

1) И сделайте один тест, который проверит, правильно ли выполняется рендеринг.

2) Другой тест, который проверит, являются ли категорииотображается правильно.

Ожидаемый результат : Тогда, если категории не отображаются, вы точно будете знать, в чем проблема.