Cypress + Storybook. Хранение тестового сценария, данных и рендеринг компонента в одном месте

Cypress + Storybook. Хранение тестового сценария, данных и рендеринг компонента в одном месте

Сперва Cypress воспринимался как инструмент e2e-тестирования. Было любопытно наблюдать за ростом интереса front-end инженеров к теме, в которой всю жизнь правил Selenium. В то время типичное видео или статья, демонстрирующие возможности Cypress, ограничивались блужданием по случайно выбранному сайту и заслуженными лестными отзывами об API для ввода данных.

Многие из нас догадались использовать Cypress для тестирования компонентов в изоляции предоставляемой такими средами как Storybook/Styleguidist/Docz. Хороший пример — статья Stefano Magni «Testing a Virtual List component with Cypress and Storybook». В ней предлагается создать Storybook Story, разместить в ней компонент и поместить в глобальную переменную данные, которые будут полезны для теста. Этот подход хорош, но в нём тест разрывается между Storybook и Cypress. Если у нас много компонентов, такие тесты будет сложно читать и поддерживать.

По ссылке в источнике вы узнаете, как пойти чуть дальше и взять максимум от возможности исполнять JavaScript в Cypress.

Информация была полезна для вас?

Расскажите пожалуйста что мы можем улучшить?


Обзор Cypress

Разработка Cypress — это open-source фреймфорк для E2E тестирования

Подробнее...


Обзор Storybook

Разработка Storybook - это инструмент с открытым исходным кодом для разработки компонентов пользовательского интерфейса в изоляции для React, Vue и Angular

Подробнее...

Следующая записьЕще статьи