Mock Service Worker — это потрясающе

Одним из самых больших препятствий для любого вида UX-разработки являются данные. Мы все были там: у нас есть дизайн, некоторые функции в бэклоге, и мы с нетерпением ждем начала разработки нашего нового приложения. Но мы зависим от данных из API.

Обычный способ преодолеть это и не быть полностью заблокированным этой ситуацией — использовать некоторые статические имитационные данные и создавать наши компоненты в какой-либо среде разработки компонентов, например, в Storybook. Наличие статических имитационных данных позволит нам разработать некоторые презентационные компоненты, но настоящее мясо и картофель нашего приложения нужно будет разрабатывать только после получения реальных данных.

Другой способ заключается в том, чтобы API возвращал некоторые имитационные данные, которые мы будем использовать в нашем приложении, и только когда команда бэкенда предоставит нам некоторые имитационные данные, они смогут начать работу над реальными функциями. Опять же, это неоптимальный вариант: он замедляет работу back-end команды и оказывает на них гораздо большее давление, требуя сначала получить макетные данные и откладывая разработку реальных функций.

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

С точки зрения front-end, инструментом, позволяющим организовать подобный рабочий процесс, является Mock Service Worker, или короче msw, о котором мы и поговорим в этой статье.

Mock Service Worker (msw)

Проще говоря, msw — это инструмент для имитации API. Он имитирует вызовы API, устанавливая для вас рабочий сервис, который перехватывает сетевые вызовы API и вызывает вместо них зарегистрированные вами функции-обработчики. Вам, как разработчику, нужно беспокоиться только о написании функций-обработчиков для конечных точек, к которым обращается ваше приложение.

Он поддерживает REST и GraphQL API, может задерживать ответ имитируемых конечных точек API, чтобы конечная точка казалась более реальной, имеет собственную базу данных in-memory с пакетом @msw/data для более сложных запросов (например, поиск, сортировка), а также может запускать имитаторы в среде NodeJS вместо Service Worker (очень полезно для тестирования). Далее давайте рассмотрим, какие проблемы может решить msw и каким образом.

Преимущества использования msw

Тестирование

Представьте себе компонент React, который получает некоторые данные из API, а затем отображает их на странице. Какие у нас есть варианты тестирования? Мы можем высмеять функцию или библиотеку, которая выполняет выборку, мы можем высмеять базовый вызов fetch или мы можем перехватить сетевой вызов каким-либо образом (например, с помощью msw).

Первый подход даст нам уверенность в том, что наш компонент вызывает функцию, которая должна вернуть нам данные, второй подход дает нам уверенность в том, что наш компонент правильно интегрируется с библиотекой выборки (swr, react-query, простой fetch или axios) и последний подход дает нам уверенность в том, что мы делаем правильный HTTP вызов.

Прелесть перехвата сетевого вызова с помощью msw в наших тестах заключается в том, что мы получаем гораздо большее покрытие и, следовательно, уверенность в наших тестах, эти тесты гораздо больше отражают реальную жизнь, и мы не связываем наши тесты с библиотекой выборки. Представьте, что нам нужно изменить библиотеку, которую мы используем для выполнения сетевых вызовов, например, с swr на react-query. Поскольку в наших тестах мы не подражаем библиотеке для получения данных, нам не нужно изменять их вообще. В любых других сценариях, перечисленных выше, нам пришлось бы рефакторить и наши тесты. Двойной выигрыш!

Независимая разработка FE

Мой первый опыт работы с msw был в проекте, где я был единственным разработчиком FE, и у меня была команда BE из двух человек. У нас был очень короткий срок (1 месяц) для создания приложения. И FE, и BE начинали с нуля, и для back-end нужно было проделать некоторую работу над инфраструктурой, получить источники данных и написать скрипты миграции для этих данных и т.д. Клиент хотел, чтобы каждую неделю ему показывали демо-версию, чтобы видеть, как продвигается работа над приложением. Я предложил msw как способ разблокировать разработку, нам нужно было только договориться о моделях данных. Поскольку у нас были четкие требования к тому, как должны выглядеть данные, эта часть оказалась не такой уж сложной.

Используя msw, мы смогли проводить демонстрацию каждую неделю с имитированными конечными точками, которые выглядели реалистично. Конечные точки имели задержку в 500 мс для возврата данных, данные между страницами были связаны (нажатие на строку таблицы загружает соответствующую страницу с деталями), поиск возвращал соответствующие данные и т.д.

Когда команда бэкенда сделала несколько конечных точек, я просто удалил обработчики msw для этих конечных точек, не внося никаких изменений в основной код. Побочным эффектом стало то, что у меня были тесты, которые использовали те же обработчики для реалистичных тестов. msw был важнейшим организационным инструментом в этом проекте, который увеличил скорость работы команды и оказал наибольшее влияние на успех проекта.

Отладка

Время от времени в нашем коде возникает ошибка, которая проявляется только при возврате определенного ответа от API. Если у вас нет контроля над API (за него отвечает другая команда, это API поставщика), то это означает, что вам нужно как-то изменить HTTP-ответ в проблемном ответе. Традиционным методом в таких ситуациях является использование прокси-приложений для ОС, таких как Charles Proxy или Wireshark, но они могут быть очень сложны в настройке и правильной работе (вам придется иметь дело с сертификатами, чтобы видеть HTTPS вызовы и т.д.).

Альтернативой является создание msw, который имитирует конечную точку, которая вам нужна, и просто возвращает данные, чтобы нагрузить приложение. Это намного, намного быстрее и проще, и вы также можете использовать этот обработчик для написания теста для этого сценария (я повторяюсь, я знаю).

Заключение

В этом посте я поделился своим опытом использования библиотеки msw в своих проектах, а также рассказал о том, что может быть потенциально полезно для вас и ваших проектов. Я надеюсь, что вы попробуете. Расскажите мне о своем опыте использования msw в комментариях.

Оцените статью
devanswers.ru
Добавить комментарий