Тестирование API конечных точек с помощью Jest вместе с тестированием автоматизации пользовательского интерфейса с помощью библиотеки тестов React.

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

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

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

Обзор тестируемого приложения

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

Вы можете увидеть, что находится в корзине, выбрать вариант доставки (который изменяет общую сумму заказа), а затем щелкнуть, чтобы совершить покупку. Давайте начнем с беглого взгляда на код Node Express. Два файла, на которые стоит обратить внимание, - это index.js и carts.js. Вот сокращенный вид файла index.js. Здесь ничего неожиданного быть не должно. Вы можете увидеть обслуживание приложения React, а также маршрут Express API для корзины.

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

Тестирование уровня HTTP API Backend Node Express

Для тестирования конечной точки API нам нужно будет выполнять фактические HTTP-вызовы службы. У вас есть несколько вариантов, как это сделать, и я объясню самый простой способ начать. Вы можете запустить свой сервер Node.js локально или публично, а затем использовать фактический IP-адрес и порт. Это означает, что вы запускаете код сервера и тестовый код отдельно. Более простой подход - фактически импортировать сервер в тестовом коде и использовать модуль NPM supertest для получения доступа к сервису.

В нашем тестовом коде мы будем использовать Jest. Мы создали сценарий в файле package.json для его запуска. Вы просто набираете npm run test-API. Работать с Jest очень просто. У вас есть describe блок кода, содержащий все ваши тесты. У каждого теста есть описание и некоторый функциональный код для запуска. Каждый тест не будет считаться завершенным, пока вы не вызовете done().
Вы можете решить, хотите ли вы, чтобы тесты выполнялись параллельно или последовательно, один за другим. Мы установили флаг runInBand, чтобы запускать их последовательно. Мы также установили флаг collectCoverage true для сбора номеров покрытия кода, которые затем будут вам доступны. Вот файл, который Jest будет использовать для вашего тестового запуска.

Следует отметить, что вы можете запустить это в VS Code под отладчиком и фактически установить точки останова в тестовом коде, а также в коде экспресс-маршрута! Как видите, у нас есть тест, чтобы получить действительную корзину, и тест, чтобы убедиться, что мы обнаруживаем недопустимый идентификатор корзины.

Тестирование на уровне Backend Unit

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

Код, который вы тестируете, может быть в приложении Node.js Express или в приложении React. Мы проиллюстрируем тестирование некоторого кода в приложении React. Как часть приложения React, нам нужна функция для суммирования стоимости товаров в корзине. Мы выделили эту функцию в отдельный модуль и, таким образом, можем легко протестировать if. В следующем коде показан модуль суммы, а затем файл Jest, который его проверяет.

// sum.js
export default function sum() {
  var s = 0;
  for (var i=0; i < arguments.length; i++) {
      s += arguments[i];
  }
  return s;
}

Вы видите то же использование Jest для настройки тестовых примеров. В package.json настроен еще один сценарий для запуска теста. Его можно запустить с npm run test-react. Это связано с тем, что он содержится в коде с проектом реакции, и использование скриптов реакции будет искать все файлы, которые заканчиваются на test.js.

Тестирование автоматизации пользовательского интерфейса с помощью библиотеки тестов React

Приложение React довольно стандартное. Основные файлы, на которые следует обратить внимание, - это файлы JavaScript в каталоге src с именами index.js, App.js, cartview.js и cartItem.js. Их довольно легко понять. Приложение использует функциональные компоненты ShippingOptions и CartView. CartView, в свою очередь, использует CartItem функциональный компонент.

В этом случае тестирование будет проводиться с использованием RTL, что расшифровывается как React Test Library. Вы можете просканировать приведенный ниже код и увидеть, что он использует ту же функциональность Jest с блоками описания и тестирования.

RTL дает вам возможность отображать пользовательский интерфейс. Вы делаете это следующим образом - render(<App cartId={777} />). Таким образом, весь ваш реальный код в функциональном компоненте будет запущен и будет использовать виртуальную модель DOM. Это означает, что создается экземпляр приложения, а значит, и CartView. Как и в случае с обычными функциями React, будет вызвана функция useEffect() и будет выполнен сетевой вызов fetch() для получения идентификатора корзины.

Здесь мы используем возможность Jest переопределить вызов fetch() нашими собственными результатами. Это устанавливается в вызове beforeAll(), а затем используется в вызове window.fetch.mockResolvedValueOnce(). Затем это перехватит сетевой вызов низкого уровня и вернет результаты, которые мы хотим для теста.

Основная часть тестирования выполняется с использованием expect() вызовов, предоставляемых @testing-library/jest-dom/extend-expect import. Мы используем объект импорта экрана, чтобы найти элементы пользовательского интерфейса для тестирования и взаимодействия. Вы можете увидеть несколько примеров проверки ценностей. Также можно щелкнуть переключатель, чтобы изменить выбор доставки, а затем проверить, правильно ли рассчитана сумма заказа.

Этот тест можно запустить с npm run test-react. Также обратите внимание, что используется ожидание, потому что в этот момент пользовательский интерфейс все еще отображается, и нам нужно использовать возможность RTL, чтобы мы могли дождаться появления определенного элемента пользовательского интерфейса. Альтернатива - настроить использование таймеров, но это, конечно, не так эффективно.

Примечание. Чтобы просмотреть отчет о покрытии кода, перейдите в каталог coverage/lcov-report и откройте файл index.html. На этом экране вы можете щелкнуть файл и углубиться в исходный код, чтобы увидеть фактическое покрытие строки.

Заключение

Любой проект на React и Node.js по необходимости потребует различных методов тестирования. Jest - отличный фреймворк, который выступает в качестве отправной точки для каждого из различных типов тестов. В случае модульных тестов и тестов API просто используется Jest. Однако в случае тестирования автоматизации пользовательского интерфейса он используется вместе с платформой React Testing Library.

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

Примечание. Весь код для этой статьи можно найти в репозитории GitHub здесь - https://github.com/eljamaki01/ReactNodeTesting.git. Чтобы собрать и запустить его, сначала загрузите код. Затем из основного каталога проекта в командной строке запустите npm run build-react, а затем node index.js, затем в браузере перейдите к http://localhost:3000/ . Вы также можете запустить тестовые сценарии из командной строки, как описано выше.

Ресурсы: Ссылка на полезную документацию, например методы RTL для поиска элементов с get/find/query - https://testing-library.com/docs/react-testing-library/cheatsheet женщина
Ссылка на полезную документацию о том, что можно сделать с ожидаемыми вызовами Jest от @testing-library/jest-dom - «https://github.com/testing-library/jest-dom

Больше контента на plainenglish.io