Моделируйте различные ответы API внутри историй Storybook с помощью Axios и axios-mock-adapter.

Итак, я хотел найти способ имитировать различные ответы api для моих компонентов React при их разработке в Storybook. Я обнаружил еще один очень полезный учебник, но в нем использовалась другая библиотека выборки вместо Axios. Затем я решил разместить свой небольшой учебник, чтобы помочь другим, использующим Storybook и HTTP-клиент Axios.

Предполагая, что у вас уже есть Storybook. Установите это:

npm install axios-mock-adapter --save-dev

Тогда в ваших рассказах:

Мой тестовый компонент предназначен только для иллюстрации. Здесь важно следующее:

  • Без фиктивного адаптера ответом были бы данные о планете Татуин из Звездных войн. Но фиктивный адаптер перехватывает запрос и возвращает { test: 'some mock data' }. Довольно круто!
  • API вызывает вас, чтобы указать, что onmock.onGet должно точно соответствовать тому, что запрашивается в вашем вызове Axios GET. В случае сомнений проверьте объект конфигурации ответа Axios.
  • Не добавляйте mock.onGet вне .add(‘Component’, () => {...}) функции, потому что это испортит другие вызовы Axios, которые могут быть в других историях. По сути, mock.onGet будет ограничиваться рамками рассказа.
  • Вы можете передать { delayResponse: 2000 }) при создании экземпляра axios-mock-adapter для имитации сетевой задержки.

Вот и все.

Спасибо и удачного кодирования!

PS: Вот репо с полным кодом.

Подпишитесь на мою рассылку!

Если вам понравился этот контент, подпишитесь на мою ежемесячную новостную рассылку. Я пишу о
Developer Experience (DX), Frontend-разработке и архитектуре программного обеспечения. Обещаю, без спама. И вы можете отказаться от подписки в любой момент. Зарегистрируйтесь на rafaelrozon.com.