В Wehkamp мы создаем интерфейс с помощью React и GraphQL, что представляет собой прекрасный стек для работы. Для нового проекта я взял на себя ответственность написать сквозные тесты в Cypress.io, еще один инструмент, с которым я люблю работать.

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

Поскольку мы не хотим тестировать эту часть (это работа третьей стороны, верно?), Нам нужно имитировать вызов из браузера в Cypress. Однако, поскольку мы используем GraphQL, мы не можем просто использовать команду cy.route. Уловка для имитации GraphQL в Cypress заключается в создании заглушки для window.fetch.

Сделать это можно так:

Принцип работы такой:

  • Fetch API возвращает обещание, которое преобразуется в объект двумя методами (json()и text()) и свойством (ok), которое указывает, был ли запрос успешным (возвращает HTTP 2xx / 3xx). Мы заглушаем это с помощью responseStub.
  • Метод isStub используется для проверки того, был ли метод уже заглушен. Это пригодится в следующей функции :).
  • getFetchStub сначала проверяет, был ли ранее заглушен window.fetch. Если это не так, оно заменяется на cy.stub. Исходный метод выборки хранится в переменной, поэтому его можно вызывать, когда нет имитации реализации для вызова GraphQL. Затем, наконец, к заглушке добавляется callsFake обработчик.
  • Затем, наконец, добавляется пользовательская команда Cypress. Он принимает функцию, которая принимает operationName и возвращает объект с тестовой функцией и объектом результата. Фактическая команда только добавляет заглушку выборки, которая вызывает функцию fetchGraphQL.
  • Макетная функция fetchGraphQL извлекает имя операции из тела и вызывает функцию getOperationMock. Это возвращает необязательный тестовый метод (чтобы проверить, соответствуют ли переменные, переданные в операцию GraphQL, ожидаемым вами) и mockResult.
    Если фиктивные данные для операции не найдены, он вызывает исходный API выборки с теми же параметрами и возвращает результат.

Так как же на самом деле использовать это в тесте? Это довольно просто:

Вызовите пользовательскую команду в beforeEach вашего теста Cypress и передайте ей функцию, которая возвращает объект для данного operationName. Затем просто зайдите на свою страницу и проведите тесты в обычном режиме.

Спасибо, что нашли время прочитать эту историю! Вы можете подписаться на меня в Twitter @ronderksen и писать мне все, что угодно!

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