Testing React app

Short story about how tests your React+Redux application with Jest and Enzyme

Transcript

1. React Unit tests
2. Что такое Unit test?
3. Зачем нужны тесты?
4. Проблемные места • Файловая и внутренняя структура тестов • Snapshot’ы • Shallow vs Mount vs Render • imports, styles, axios, redux … -> ??? • Redux store
5. Файловая структура тестов Папка компонента Папка с тестами Snapshot Папка со Snapshot’и Тест Компонент
6. Внутренняя структура тестов Комментарии
 (Дано/Условие/Результат) Блок тестов Тест Название (Принадлежность/Поведение)
7. Snapshot’ы • Компонент максимально статичен и почти никогда не меняется (верстка, stateless компоненты) • Детерминированные тесты (Запуск одних и тех же тестов для компонента, который не менялся, должен возвращать одинаковые результаты) • При рефаторинге существующих компонентов Применять: Не применять: • Во всех остальных случаях
8. Shallow vs Mount vs Render Shallow • constructor • render Life cycle methods Не рендерит дочерние компоненты Основной метод при работе с тестами Mount • constructor • render • componentDidMount • componentDidUpdate Life cycle methods Рендерит дочерние компоненты Используется если необходимо работать с *DidMount/DidUpdate Render • render Life cycle methods Рендерит дочерние компоненты Нужен если не важен Life Cycle
9. • Всегда начинайте с shallow • Если нужно протестировать функционал componentDidMount или componentDidUpdate, то используем mount • Если нужно протестировать множество методов завязанных на Life Cycle и взаимодействие с дочерними элементами, используем mount • Если нужно протестировать отображение дочерних элементов, и методы жизненного цикла нас не интересуют, используем render Когда что использовать?
10. imports, styles, axios, redux … -> ???
11. imports, styles, axios, redux … -> Mocks!
12. Imports Отдельным файлом
13. Imports Мокируем модуль внутри файла doMock блокирует всплытие и позволяет переопределять имплементацию Мокируем функцию
14. Styles
15. Axios Использование axios в коде Мокирование axios в тесте
16. Redux Store
17. PrepareRegulationPlan.test.tsx PrepareRegulationPlan.tsx Импорт класса без HOC connect Мокаем необходимые Redux поля 
 И передаем их непосредственно в компонент Подменяем Redux
18. Ссылки на полезные ресурсы Модульное тестирование React (Jest/Enzyme) - https://xasfq Тестирование Node.js-проектов - https://gjqap Unit Testing React Components - https://afgqga Difference between Shallow, Mount and render of Enzyme - https://jtaqcnz