[Перевод] Компонентное тестирование в Cypress23.05.2023 12:46

Первая альфа-версия функции тестирования компонентов стала доступна в версии Cypress 4.5.0. Это стало событием для многих, но я тогда не обратил внимание на этот шум. Что вполне нормально, поскольку компонентное тестирование  всегда было больше уделом разработчиков, чем тестировщиков. Но тестировщики тоже могут проявлять к нему интерес. Теперь, когда функции компонентного тестирования Cypress стали общедоступными (достигли статуса General Availability — GA) в версии 11, я решил погрузиться в эту тему и выяснить, почему компонентное тестирование важно. Чем больше я разбирался, тем больше понимал его значимость. В этой статье я хотел бы поделиться своей точкой зрения.

Что такое компонент?

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

Каждый компонент обладает определенными визуальными и функциональными свойствами. Как и деталь Lego, компонент может быть обычным, который используется постоянно и меняется лишь незначительно, или уникальным, выполняющим определенную функцию.

Хочу показать вам, как это работает на примере простого приложения Vue.js. Давайте рассмотрим простой компонент Vue, который может выглядеть примерно так:

Этот компонент состоит из двух частей. Одной из них является часть