Как да пишете тестове от край до край, като използвате Cypress в приложенията на React

Как да пишете тестове от край до край, като използвате Cypress в приложенията на React
Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Frontend разработката включва изграждане на визуално привлекателни, функционални клиентски приложения. Но има уловка; тези приложения трябва да гарантират, че потребителите имат безпроблемно изживяване.





MUO Видео на деня ПРЕВЪРТЕТЕ, ЗА ДА ПРОДЪЛЖИТЕ СЪС СЪДЪРЖАНИЕТО

Макар че модулните и интеграционните тестове са от съществено значение за проверка на функционалността на приложението, те може да не уловят напълно типичните потребителски взаимодействия. За да симулирате наистина пътуването на потребителя, трябва да стартирате тестове от край до край, които възпроизвеждат действителните потребителски взаимодействия. Това ще гарантира, че вашето приложение работи според вашите намерения от началото до края.





как да добавите връзка за кликване в публикация в instagram

Първи стъпки с тестване от край до край с помощта на Cypress

Основната цел на тестването от край до край в приложенията отпред е да се проверят резултатите, а не подробностите за изпълнение на бизнес логиката.





Вземете форма за влизане като пример. В идеалния случай бихте тествали дали екранът за вход изскача по начина, по който трябва и прави това, което трябва да прави. По същество основните технически подробности не са важни. Крайната цел е просто да влезете на мястото на потребителя и да оцените цялото му изживяване.

 Начална страница на Cypress на официалния уебсайт

Кипарис е страхотна рамка за автоматизирано тестване, която е съвместима с някои от най-популярните рамки на JavaScript . Способността му да изпълнява тестове директно в браузъра и изчерпателният му набор от функции за тестване правят тестването безпроблемно и ефективно. Той също така поддържа различни подходи за тестване, включително:



защо телефонът ми казва volte
  • Единични тестове
  • Тестове от край до край
  • Интеграционни тестове

За да напишете тестове от край до край за приложение на React, разгледайте тези потребителски истории:

  • Потребителят може да види поле за въвеждане със съответния бутон за изпращане.
  • Потребителят може да въведе заявка за търсене в полето за въвеждане.
  • След като щракне върху бутона за изпращане, потребителят трябва да види списък с елементи, показан точно под полето за въвеждане.

Като следвате тези потребителски истории, можете да създадете просто приложение React, което позволява на потребителя да търси продукти. Приложението ще извлече данни за продукта от API на DummyJSON и го изобразете на страницата.