Тестирование React-приложений на практике

Пишем приложение для конвертации валют с нуля на React по TDD.

Привет!

Меня зовут Саша, и я разработчик.

Веду технический блог и работаю над обучающими проектами. О некоторых вы могли слышать:

Что мы напишем и протестируем

Чистые функций для бизнес-логики.
Функции, возвращающие случайные значения.
Простые компоненты, зависящие только от пропсов.
Кастомные хуки, их связь с компонентами.
Редьюсеры, экшены и компоненты, зависящие от стора.
Асинхронные функции и вызовы API.
Пользовательские действия: клик, клавиатура.

Диаграмма компонентов приложения

В приложении будет 3 главных блока: шапка с текущим курсом и кнопкой «Обновить», форма с полями для сумм, рандомная цитата в подвале.

Диаграмма цикла разработки по TDD

Цикл состоит из 3 стадий: красная зона, когда тесты не проходят; зелёная, когда мы реализуем функциональность, которая проходит тесты; синяя, в которой мы рефакторим код.

Диаграмма потоков данных

Данные хранятся в сторе, обновляются через экшены и влияют на отрисовку страницы. Запросы к серверу осуществляет мидлвар.

Разница между данными от ЦБ и желаемыми

ЦБ отдаёт данные в XML, а нам необходим JSON.

Что почитать о React Testing Library

...О моках

...О Редаксе и его тестировании

...О тестируемом коде

Саша Беспоясов 👋