Привет всем, недавно я увидел пару вопросов, касающихся тестирования в экосистеме JavaScript. Вот некоторые из вопросов:

• Как проверить вызовы API?
• Как проверить аксиомы?
• Как проверить вызовы API, запущенные из хука useEffect?
• Как протестировать вызовы API из React Query?

Сценарий

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

Теперь типичный способ проверить это - отрендерить наш компонент и дождаться, пока имя, возвращаемое из вызова API, отобразится на экране. При использовании React Testing Library ожидаемый тест должен быть следующим:

Теперь вопрос в том, как убедиться, что запросы в наших тестах возвращают ожидаемые данные?

Использование axios-mock-adapter

axios-mock-adapterэто первое решение. Это позволяет вам имитировать аксиомы, предоставляя вам более читаемый синтаксис для явного объявления того, что вы хотите сделать. В следующем примере мы получаем ссылку на MockAdapter instance. Using this instance, we then use theaxios и создаем новый метод onGet`, чтобы гарантировать, что, когда мы запускаем запрос GET на наш ожидаемый URL, мы возвращаем данные, которые нам нужны.

Насмешка над аксиомами вручную

Вы можете использовать Jest, чтобы имитировать аксиомы самостоятельно и избежать установки внешних библиотек. В следующем подходе мы используем jest.mockимитацию аксиомов, а затем внутри нашего теста мы имитируем реализацию метода get, чтобы вернуть наши ожидаемые данные для ожидаемого URL.

Если вам не нравится такой подход, вы можете создать axios.jsфайл внутри __mocks__каталога и добавить туда следующий фрагмент.

Когда вы запустите свой тест, Jest автоматически подберет этот файл и имитирует для вас аксиомы.

Использование MSW

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

Для этого сценария все, что нам нужно сделать, это создать обработчик для нашего запроса, который возвращает ожидаемые данные. Затем мы либо добавляем обработчик в наш список обработчиков, либо вызываем server.useнаш тест, чтобы переопределить наши обработчики.

Если вы хотите узнать больше о MSW, вы можете прочитать об этом в моем блоге .

Подведение итогов

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

Надеюсь, вы нашли этот пост в блоге полезным. Следите за новостями и увидимся в следующий раз!

Первоначально опубликовано на https://www.danieljcafonso.com .