Как мы создали свою ui-библиотеку и покрыли ее тестами 👩‍💻

При планировании одного из проектов решили поэкспериментировать и не использовать готовое решение в качестве библиотеки компонентов, а создать свое

Использовали Storybook, React Testing Library

Какие плюсы и зачем?

Storybook - это инструмент для организации и изолированного создания компонентов. В особенности помогает для новых людей в команде, которым будет в разы легче посмотреть сторибук, чем лазить по всем файлам в shared/ui/... И они не напишут лишний раз компонент, который уже есть 🌧
Уникальность дизайна и функциональности (хотя почти во всех рабочих кейсах возможности ui-библиотек (по типу ant, material) покрывали все мои потребности. Но все же, бывают специфичные и уникальные идеи заказчиков 🥲
После какого-либо рефакторинга необходимо проверять состояние всех ui компонентов, например:

тесты на рендер без ошибок;
наличие переданных пропсов;
правильность применения css/scss классов;
взаимодействие с пользователем(клики, ховеры) и так далее...

Поэтому покрытие тестами спасает тебя от жалоб пользователей с прода))

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

В моем телеграм канале посты выходят намного быстрее! https://t.me/notfrontdevelop ✅✅✅