Недавно я работал с Jest и Enzyme для тестирования приложений React Native, и одной из самых больших проблем было тестирование асинхронных методов моих компонентов React Native. Я расскажу, как тестировать асинхронные методы, включая то, что я считаю самой сложной частью: имитация API-интерфейса выборки. Вот — пример проекта, который я буду использовать ниже.

Как я заметил в недавней статье, инструменты и логика, используемые для тестирования приложения React, могут быть легко повторно использованы с React Native — вам просто нужно позаботиться о настройке инфраструктуры.

Имея это в виду, в этой статье будет упоминаться «React Native», но подход, используемый ниже, также можно использовать для тестирования асинхронных методов компонентов React.

Тестирование асинхронных функций в обычном коде JavaScript может быть сложным, а тестирование асинхронных методов компонента React добавляет дополнительный уровень сложности.

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

В этой статье я расскажу о подходе, который я использовал, чтобы имитировать API выборки для явного тестирования асинхронных методов с использованием Jest и Enzyme.

Во-первых, зачем нужно явное тестирование?

Вы можете неявно протестировать метод с помощью Enzyme, чтобы «найти» элемент внутри снимка и смоделировать событие, такое как щелчок, а затем проверить результат этого действия. Но это полезно только в том случае, если вы тестируете метод, привязанный к элементу DOM, например к кнопке.

Таким образом, существует необходимость в явном тестировании методов компонентов.

Вызов метода компонента

Enzyme предоставляет действительно простой способ вызова определенного метода компонента внутри модульного теста.

Вы можете использовать поверхностный API, предоставляемый Enzyme, для рендеринга компонента (это поверхностный рендеринг, поскольку он не отображает дочерние элементы компонента).

Затем используйте метод instance объекта-оболочки, чтобы создать локальный экземпляр (мелкого) компонента для использования в тесте.

Затем вы можете вызвать метод этого экземпляра непосредственно внутри теста, как и следовало ожидать (в конце концов, (почти) все в JavaScript на самом деле является просто объектом!).

Это обеспечивает удобный способ явного тестирования методов компонентов внутри модульных тестов.

Тестирование асинхронного метода

Метод getPersonData в приведенном ниже примере метода использует fetch API для получения данных с сервера с помощью SWAPI.

Нам нужно принять некоторые меры, чтобы имитировать API выборки внутри наших тестов, чтобы имитировать ответ от сервера.

Зачем нужно издеваться?

Во-первых, всегда важно четко понимать, что мы на самом деле хотим протестировать. Здесь мы проверяем, возвращает ли метод часть данных после выполнения HTTP-запроса. Мы используем инструмент, чтобы сделать запрос для нас (API выборки, предоставляемый средой хостинга), и поэтому, что важно, мы не тестируем API выборки. За это (должно быть) отвечают авторы API.

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

Для этого есть несколько подходов, но тот, который сработал лучше всего для меня и, как мне кажется, самый чистый подход — это использование библиотеки fetch-mock.

Пример

Чтобы продемонстрировать, я создал образец приложения React Native, в котором пользователь может нажать кнопку, чтобы отобразить первое имя в ответе, предоставленном конечной точкой« людей , предоставленной SWAPI.

Вы можете думать об использовании функции fetchMock ниже, как о том, что говорите тесту: «внутри этого теста всякий раз, когда fetch API вызывается с этим конкретным URL-адресом, на самом деле не делайте запрашивать, но всегда немедленно возвращать этот mockResponse”

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

Резюме

Я рассказал, как тестировать асинхронные методы компонента React или React Native с помощью Jest и Enzyme. Важным моментом, который нужно было уяснить, было то, как имитировать fetch API с помощью fetch-mock.

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