Прагматичное руководство по созданию поддерживаемых компонентов React на базе GraphQL.
Написание производительных, тестируемых и читаемых компонентов React можно считать искусством, но я надеюсь убедить вас, что этого можно достичь с помощью простого набора инструментов ? , нескольких рецептов ? , и нескольких примеров ? .
Начало работы с GraphQL
Один из распространенных подходов и подводных камней заключается в том, чтобы начать реализацию с фронтенда и работать в обратном направлении к GraphQL API. По моему опыту, это может привести к менее чем идеальному дизайну схемы, негативно влияющему на работу с GraphQL для любого другого потребителя вашего API, где типы оказываются мешками данных без какого-либо смысла и цели.
Необходимо учитывать следующие моменты:
- Как другие представления фронтенда получат эти данные?
- Как будет применяться нулевая точность?
- Будут ли эти данные иметь смысл для других разработчиков?
Начало работы с GraphQL будет не только лучше для вашей схемы, но также будет лучше и важнее для вас и вашей команды при создании поддерживаемых внешних систем. Чтобы начать создавать свой GraphQL API и построить действительно устойчивую схему, вам почти наверняка стоит обратиться к Production Ready GraphQL и достойному сопутствующему учебнику Designing a GraphQL API.
Переход
Теперь, когда у нас есть готовая к производству схема GraphQL, как нам реализовать ее потребляющий аналог? Давайте начнем с самых фундаментальных компонентов нашего большого приложения и изучим некоторые из первых инструментов в вашем инструментарии ? ; композиция компонентов и фрагменты GraphQL.
Фрагменты позволяют создавать наборы полей, а затем включать их в запросы, где это необходимо.
Фрагменты могут быть использованы для достижения одной концепции, широко используемой в React, — коллокации, когда вы можете содержать все данные, необходимые компоненту, наряду с логикой, стилизацией и рендерингом.
На практике вы можете создать компонент, которому не нужно запрашивать свои данные, а вместо этого он предоставляет интерфейс для получения данных при использовании в других компонентах (отсюда композиция компонентов).
Пример ?
Небольшой компонент, который получает все свои данные из props и определяет, как он ожидает получать данные, используя фрагмент GraphQL.
Включено ли это?
Чтобы создать поддерживаемый и отгружаемый React, вы захотите протестировать функциональность в изоляции таким образом, чтобы было ясно, когда что-то ломается, чтобы вы и ваша команда были уверены в каждом релизе.
Тестирование компонентов React не так сложно, как кажется, особенно с современными инструментами, такими как React Testing Library и Jest, которые устраняют все догадки о рендеринге и взаимодействии с компонентом. Jest будет работать в качестве программы запуска тестов и обеспечит общую структуру ваших модульных тестов, а библиотека React Testing Library предоставит методы, необходимые для точной проверки функциональности.
Функциональность пользователя
Приступить к работе с библиотекой тестирования React можно быстро и не отличается от написания модульных тестов для функций и классов. Каждый тестовый пример должен начинаться с рендеринга компонента методом render и деструктуризации return для получения доступа к результату рендеринга, а также запросов к документу, таких как getByText, getByLabel (см. шпаргалку по запросам).
Пример ?
Пример тестового файла с использованием библиотеки React Testing Library и нашего ранее определенного компонента Message
. Показывает, как можно протестировать пользовательскую функциональность с предсказуемыми результатами.
Облачно с вероятностью ошибок ⛅??
Jest использует пакет под названием Istanbul для обеспечения метрик покрытия тестов, таких как покрытие утверждений, ветвей, функций и строк, чтобы вы могли понять и обеспечить качество вашего набора тестов, обеспечивая большую уверенность в релизах.
Настоятельно рекомендуется установить пороговые значения покрытия, которые вас устраивают и не обременяют покрытием каждого тестового случая и потока, а затем интегрировать тесты покрытия в конвейер CI/CD и блокировать неудачные сборки.
Чтобы начать работу и собрать покрытие тестов, вы можете выполнить следующую команду (или добавить аргумент —coverage в существующий сценарий тестирования узла):
npx jest --coverage
Некоторые моменты, о которых следует помнить, пытаясь достичь высокого покрытия:
- тестовые блоки должны взаимодействовать с вашим компонентом, используя все возможные варианты
- операторы if и раннего возврата должны быть рассмотрены, и оба или несколько путей должны быть протестированы
- опциональные цепочки (?.) становится все труднее тестировать, чем длиннее цепочка, а возможность обнуления типов GraphQL должна быть фактором, который следует учитывать при создании компонента.
В Jobber наши цели по покрытию тестами составляют около 85%!
Собираем части вместе ?
Теперь, когда мы определили наш компонент и то, как он будет получать данные, как мы можем использовать его в масштабе и вместе с другими компонентами? Давайте посмотрим на концепцию загрузчика и на то, как сделать ваш фрагмент пузырьком!
Пример ?
Несколько компонентов, показывающих, как можно повторно использовать и создавать более крупные компоненты, состоящие из более мелких компонентов, реализующих размещение фрагментов и получение данных (с помощью компонента-загрузчика). Использование ранее определенного компонента Message
.
Используя паттерн loader
, мы можем легко реализовать и протестировать наш компонент Conversation
и обработать преобразование запросов в нашем компоненте loader. Кроме того, нам не нужно так много подражать, используя MockedProvider
из Apollo (см. тестирование компонентов react с помощью Apollo). Кроме того, запросы или фрагменты будет намного проще добавлять при использовании такого инструмента, как GraphQL Code Generator, наши типы Typescript становятся очень простыми в реализации!
О Jobber
Интересуетесь React & GraphQL? Рассмотрите возможность присоединиться к Jobber или внести свой вклад в нашу систему проектирования с открытым исходным кодом Atlantis. Мы набираем сотрудников на удаленные позиции по всей Канаде на все уровни разработки программного обеспечения!
Наши потрясающие технологические команды Jobber охватывают такие сферы, как платежи, инфраструктура, AI/ML, бизнес-процессы и коммуникации. Мы работаем на передовых и современных технологических стеках с использованием React, React Native, Ruby on Rails и GraphQL.
Если вы хотите стать частью культуры совместной работы, помогать малым предприятиям по обслуживанию на дому масштабироваться и оказывать положительное влияние на наши сообщества, то посетите наш сайт по трудоустройству, чтобы узнать больше!