Тестирование вызовов выборки не обязательно является самым простым делом при тестировании, особенно если у вас есть несколько выборок. Мы поговорим о том, как сделать ваши загрузки сверхдинамичными, чтобы упростить тестирование. Если не верите, продолжайте читать!

Если в приложении, которое вы создаете, используется несколько вызовов fetch, лучше всего иметь один метод fetch, чтобы вы могли передавать им информацию. Посмотрите этот фрагмент кода:

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

Поскольку по умолчанию для выборки выбрано «GET», нам не нужно указывать здесь какие-либо параметры. Я оставил эту часть достаточно открытой для вас, в зависимости от используемых вами фреймворков, поэтому для вас все может быть иначе. Чтобы эффективно протестировать вызов fetch, нам нужно смоделировать вызов fetch, и у нас будет три теста для написания: он должен вызываться с правильным URL-адресом, он должен возвращать данные, если ответ в порядке, и он должен возвращать ошибку, если ответ не в порядке. Давайте начнем.

Здесь мы тестируем javascript, но у нас есть имитация выборки с помощью jest, поэтому вам нужно импортировать jest и фермент. Как только вы настроите фиктивные данные, нам нужно будет имитировать вызов выборки. С window.fetch = jest.fn().mockImplementation мы можем создать шутливую функцию вызова fetch, а затем смоделировать ответ, который мы ожидаем получить обратно. Во-первых, мы ожидаем разрешить Promise со статусом ok, равным true (вспомните блок if в нашем вызове динамической выборки!), Если true, у нас также должен быть объект JSON, который разрешает еще одно обещание, наконец, ответ, который мы ожидал.

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

Просто так пройденный тест! Мы вызываем нашу функцию с нашим фиктивным URL и ожидаем, что с ним будет вызываться fetch. Причина, по которой мы используем undefined в качестве второго аргумента, заключается в том, что мы используем опцию выборки по умолчанию, поэтому нам не нужно ее менять. Давайте попробуем второй, счастливый путь.

Еще одно прохождение теста! Здесь мы используем синтаксис async / await, чтобы можно было ожидать ответа на наш фиктивный вызов fetch. Давай сделаем последний тест.

Финальный тест пройден! Вот и все, мы закончили тестировать наши вызовы fetch и имитировать их.

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