Как должен выглядеть тест, React/redux?

Question

[cester]

Добрый день! Объясните пожалуйста как тестировать компонент, например, модальное окно, которое отвечает за редактирование или удаление чего-то. В компоненте есть другие компоненты и он экспортируются через connect(mapStateToProps, mapDispatchToProps)(ModalComponent);.

Нужно как-то прокидувать store?
Не совсем понимаю, что я должен протестовать, пришли ли входные props, какой-то ивент?
Как должен выглядеть тест для подобного компонента?
Для тестов уже есть jest+enzume.
Очень прошу помочь!
Спасибо!

Comments

[Антон Спирин]

Вам надо тестировать компонент без подключения к store, заменив получаемые оттуда свойства моками.

[cester]

Без <Provider store={store}>
ошибка

Invariant Violation: Could not find "store" in either the context or props of "Connect(ReduxForm)".

Что такое моки?

[Javid Asgarov]

По поводу ошибки, можно экспортировать компоненты без redux.

export const UnwrappedLogin = Component;
export default connect(mapStateToProps, mapDispatchToProps)(Component);

Так можно тестировать сразу компонент без привязки к библиотеке.

Answer 1

[Lonelygriffin]

есть хорошая статья на этот счет https://medium.com/selleo/testing-react-components...
все "грязные" зависимости (store, обращение к api, итд) мокаешь в setup функции. В итоге получаешь существенное уменьшение копипаста в тестах и отличную читаемость

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