Когда речь заходит о создании надёжных приложений, тесты могут сыграть критически важную роль в способности как отдельного человека, так и команды, создавать новую функциональность, заниматься перестроением кода, исправлять ошибки и т.д. Несмотря на то, что существует множество подходов тестирования, выделяют три категории в контексте веб-приложений:
Цель этого раздела — помочь в ориентировании по экосистеме тестирования и выбору подходящих инструментов для приложения Vue или библиотеки компонентов.
Модульные тесты позволяют проверять отдельные части кода изолированно. Цель модульного тестирования — обеспечить разработчикам уверенности в коде. Написание тщательных и содержательных тестов, позволяет быть увереннее в том, что при разработки новых функций или перестроении кода приложение остаётся функциональным и стабильным.
Модульное тестирование приложения Vue существенно ничем не отличается от тестирования других типов приложений.
Поскольку модульное тестирование часто является зависимым от используемого каркаса, то вот некоторые основные принципы, которые следует иметь ввиду при оценке какой инструмент модульного тестирования лучше всего подходит для вашего приложения.
Когда тесты падают, очень важно чтобы каркас для модульного тестирования предоставлял полезную информацию об ошибках. Это работа библиотеки утверждений. Качественные сообщения об ошибках позволяют свести к минимуму время, необходимое для отладки проблемы. Кроме простого сообщения об упавшем тесте, такие библиотеки предоставляют контекст, объясняющий почему упал тест, например отличие ожидаемого результата от фактического.
Некоторые каркасы для модульного тестирования, такие как Jest, уже включает в себя библиотеку утверждений. Другие, такие как Mocha, требуют установки библиотеки утверждений отдельно (обычно Chai).
Поскольку большинство каркасов для модульного тестирования с открытым исходным кодом, то активное сообщество может иметь решающее значение для некоторых команд, которые планируют поддерживать свои тесты в течение длительного периода времени, и которым необходимо обеспечивать активную поддержку того или иного проекта. Кроме того, преимущество наличия активного сообщества в том, что оно может оказать большую поддержку всякий раз при столкновении с проблемами.
Несмотря на то, что в экосистеме существует множество инструментов, здесь приведены некоторые популярные инструменты для модульного тестирования, которые используются в экосистеме Vue.js.
Jest — каркас для тестирования JavaScript, которые фокусируется на простоте. Одной из его уникальных особенностей является возможность создания тестов, в качестве альтернативного средства проверки модулей приложения.
Ресурсы:
Mocha — каркас для тестирования JavaScript, который фокусируется на гибкости. Благодаря ей можно выбирать различные библиотеки для выполнения общих функций, таких как spying (например, Sinon) или assertions (например, Chai). Другая уникальная особенность Mocha в том, что она позволяет выполнять тесты как в обозревателе, так и в Node.js.
Ресурсы:
Для тестирования большинства компонентов Vue потребуется примонтировать их к DOM (неважно, виртуальному или реальному), чтобы иметь возможность полностью проверить их работоспособность. Эта концепция также зависима от каркаса. Поэтому были созданы каркасы для тестирования компонентов, которые предоставляют пользователям возможность сделать это надёжным способом, а также поддерживают специфические возможности Vue, такие как сопряжение с Vuex, Vue Router или другими Vue-добавками.
В следующем разделе приведены рекомендации, которые стоит учитывать при оценке, какой каркасдля тестирования компонентов лучше всего подходит для вашего приложения.
Неудивительно, что одним из первых критериев является то, что библиотека тестирования компонентов должна быть максимально совместима с экосистемой Vue. Хотя это может показаться излишним, но некоторые ключевые особенности по сопряжению позволяют тестировать однофайловые компоненты (SFC), Vuex, Vue Router и любые другие добавки Vue, которые используются в приложении.
Когда тесты падают, очень важно чтобы каркас для тестирования компонентов предоставлял полезную информацию об ошибках, чтобы помочь уменьшить время необходимое для отладки проблемы. Кроме простого сообщения об упавшем тесте, такие библиотеки предоставляют контекст, объясняющий почему упал тест, например отличие ожидаемого результата от фактического.
Vue Testing Library — это набор инструментов, ориентированных на тестирование компонентов, не полагаясь на детали реализации. Разработка с учётом доступности, делает перестроение кода очень приятным занятием.
Главным принципом является то, что чем больше тесты похоже на то, как используется программное обеспечение, тем больше уверенности они могут обеспечить.
Ресурсы:
Vue Test Utils — это официальная библиотека для низкоуровневого тестирования компонентов, написанный для предоставления доступа к API, специфичным для Vue. Если вы новичок в тестировании приложений Vue, мы рекомендуем использовать библиотеку Vue Testing Library, которая является абстракцией над Vue Test Utils.
Ресурсы:
В то время как модульные тесты предоставляют разработчикам некоторую степень уверенности в коде, с другой стороны модульные тесты и тесты компонентов ограничены в возможностях по обеспечению целостного охвата приложения при публикации в продуктиве. В результате, end-to-end (E2E) тесты обеспечивают покрытие того, что, возможно, является наиболее важным аспектом приложения: что происходит, когда пользователи на самом деле используют приложение.
Другими словами, E2E тесты проверяют сразу все слои вашего приложения. Сюда входит не только код фронта, но и работа всех связанных сервисов и инфраструктуры сервера, в условиях которых будут работать пользователи. Тестируя как они взаимодействуют с приложением, E2E тесты часто являются ключом к повышению уверенности в том, что приложение работает корректно.
Исторически сложилось, что end-to-end (E2E) тестирование в интернете получило отрицательную репутацию из-за ненадежных тестов и замедления процессов разработки. Современные инструменты E2E продвинулись далеко вперёд в создании более надёжных, интерактивных и полезных тестов. Для выбора каркаса для E2E тестирования в следующем разделе приведены некоторые рекомендации, которые стоит учитывать при выборе каркаса для тестирования вашего приложения.
Одним из основных преимуществ end-to-end (E2E) тестирования является возможность протестировать работу приложения в нескольких обозревателях. И хотя может показаться желательным иметь 100% межобозревательного покрытия, важно отметить, что это снижает отдачу от ресурсов команды из-за дополнительного времени и мощности машины, необходимой для их последовательного запуска в каждом из обозревателей. В результате, важно не забывать о компромиссе при выборе количества межобозревателей тестирований для проверки возможностей вашего приложения.
Одним из популярных способов в E2E для решения проблем, связанных с обозревателями, является использование инструментов наблюдения приложений и уведомлений об ошибках (например, Sentry, LogRocket, и т.д.) для обозревателей, которые используются не так часто (например, < IE11, более старые версии Safari, и т.д.).
Одной из основных проблем end-to-end (E2E) тестов и разработки является то, что запуск всего набора тестов занимает много времени. Обычно, они запускаются только в канале непрерывного сопряжения и развёртывании (CI/CD). Современные Е2Е каркасы помогают решить эту проблему с помощью распараллеливания, что позволяет ускорить выполнение ci/cd каналов. Кроме того, при местной разработке можно выборочно запускать тесты для страницы, над которой сейчас работаете, а также возможность горячей перезагрузки тестов, что позволит повысить производительность труда разработчиков.
Пока разработчики традиционно полагаются на отслеживание журналов в окне терминала для определения что пошло не так, современные end-to-end (E2E) каркасы предоставляют инструменты, с которыми они уже знакомы, например использовать инструменты разработчика обозревателя.
При запуске end-to-end (E2E) тестов в каналах непрерывного сопряжения / развёртывания, они часто выполняются в безголовых обозревателях (т.е., не открывается видимое окно обозревателя, за которым можно наблюдать). В результате, при возникновении ошибок, критической особенностью, поддерживаемой современными е2е каркасами является первоклассная поддержка просмотра моментальных снимков и/или видео вашего приложения на различных этапах тестирования для того, чтобы получить представление о причине происхождения ошибки. Исторически сложилось так, что поддерживать такие сопряжения достаточно утомительно.
Несмотря на то, что в экосистеме существует множество инструментов, здесь приведены некоторые популярные е2е каркасы, которые используются в экосистеме Vue.js.
Cypress.io — каркас для тестирования, который фокусируется на повышении производительности разработчиков, предоставляя возможности по надёжному тестированию своих приложений и обеспечении первоклассного опыта разработчиков.
Ресурсы:
Nightwatch.js — каркас для end-to-end тестирования, который можно использовать для тестирования веб-приложений и веб-сайтов, а также для тестирования модулей Node.js и тестирования сопряжения.
Ресурсы:
Puppeteer — библиотека Node, которая предоставляет высокоуровневый API для управления обозревателем и может соединяться с другими инструментами для запуска тестов (например, Jest) для проверки вашего приложения.
Ресурсы:
TestCafe — е2е каркас, основанный на Node.js, который фокусируется на обеспечении лёгкой настройки, чтобы разработчики могли сосредоточиться на создании простых в написании и надёжных тестах.
Ресурсы: