Модульное и E2E-тестирование для Vue.js
Написание тестов при разработке приложений Vue.js может сэкономить вам много времени, которое в противном случае было бы потрачено на исправление ошибок. Чем больше и сложнее становится ваше приложение, тем вернее это становится.
Существует два типа тестов, которые обычно выполняются для веб-приложений: модульные тесты а также концы с концами (Е2Е) тесты.
Какая разница? Вам нужны оба?
Давайте исследовать.
Модульные тесты
Идея «единицы» в тестировании состоит в том, чтобы разбить код на небольшие, легко тестируемые части. Обычно блок представляет собой одну функцию, но также может быть классом или даже сложным алгоритмом.
Важнейшая концепция модульного тестирования заключается в том, что данный вход функции всегда должен приводить к одному и тому же результату.
Например, если бы у нас была функция, которая складывала два числа с именем add мы могли бы написать модульный тест, чтобы гарантировать, что конкретная пара чисел, которую мы предоставили в качестве аргументов, всегда будет возвращать ожидаемый результат.
add.spec.js
const add = (x, y) => x + y;
test("should add two numbers", () => {
const result = add(2, 3);
expect(result).toBe(5);
});
Каждый раз, когда мы запускаем этот тест, и он не равен 5, мы можем заключить, что в наш код попала ошибка.
Тесты компонентов
В большинстве приложений Vue.js функции на самом деле не представляют атомарный состав приложения. Конечно, мы можем проводить модульное тестирование наших методов, но что нас действительно волнует, так это сгенерированный HTML.
По этой причине единицей в тесте приложения Vue.js является составная часть а не функция.
Как мы тестируем компоненты? Возьмем для примера этот:
displayGreeting.js
export default {
template: `<div>Hello, {{ name }}</div>`,
props: ['name']
};
Как указывалось ранее, модульный тест должен для данного ввода (в данном случае реквизита) возвращать согласованный вывод (в данном случае текстовое содержимое).
Используя такую библиотеку, как Vue Test Utils, мы можем смонтировать компонент Vue в памяти и создать объект-оболочку. Затем мы можем запросить оболочку, чтобы сделать утверждения о отображаемом HTML.
displayGreeting.spec.js
import displayGreeting from "./displayGreeting.js";
test("displays message", () => {
const name = "Michael";
const wrapper = mount(displayGreeting, { propsData: { name } });
expect(wrapper.text()).toBe(`Hello, ${name}`);
});
Моментальные тесты
В приведенном выше примере мы использовали wrapper.text() для запроса текста в выводе компонента.
Однако в большинстве компонентов для проверки достоверности вывода потребуется более одного фрагмента текста. Мы часто хотим убедиться, что присутствуют различные элементы.
Может быть, было бы проще протестировать весь HTML-вывод компонента?
Еще одним видом модульного тестирования компонентов является снимок проверьте, где вы делаете именно это.
Как это работает, вы генерируете вывод компонента один раз и записываете его в текстовый файл. Например:
displayGreeting.spec.js.snap
exports[`renders correctly 1`] = `<div>Hello, Michael</div>`;
Теперь при каждом запуске тестов, если визуализированный вывод компонента отличается от того, что находится в файле, тест завершится ошибкой.
Снимки — грубый инструмент, но они хороши для тестирования компонентов, которые отображают много HTML.
E2E-тесты
E2E (сквозное) тестирование — это разновидность функционального тестирования. В отличие от модульного теста, вы не разбиваете приложение на более мелкие части для его тестирования — вы тестируете все приложение целиком.
Тесты E2E взаимодействуют с вашим приложением так же, как и реальный пользователь. Например, вы можете написать E2E-тест, который:
- Загружает ваш сайт
- Щелкает по ссылке «Зарегистрироваться»
- Предоставляет некоторые действительные данные для входных данных в регистрационной форме.
- Нажмите кнопку «Зарегистрироваться».
Этот тест должен быть пройден, если токен аутентификации был сохранен в файлах cookie и приложение перенаправляется на страницу профиля.
Инструменты
Тесты E2E выполняются поверх драйвера автоматизации браузера, такого как Selenium, который предоставляет API для управления браузером.
Инфраструктура тестирования E2E, такая как Cypress или Nightwatch, предоставит вам возможность написать сценарии тестов E2E для драйвера автоматизации браузера.
Следующий код — это то, что вы можете использовать в Nightwatch для выполнения теста, описанного в разделе выше. Вы, вероятно, можете сказать, что он делает, даже если вы никогда не использовали Nightwatch.
регистрация.spec.js
"register user": browser => {
browser.page.register()
.navigate()
.waitForElementPresent(form.selector, 5000);
register.section.form
.setValue("@nameInput", "Anthony")
.setValue("@emailInput", "anthony@test.com")
.setValue("@passwordInput", "test1234")
.click("@submitButton");
browser
.assert.urlEquals(profile.url)
.getCookie(name, (result) => {
this.assert.equals(result.name, 'auth');
}
});
}
Сравнение юнитов и E2E
Плюсы агрегата:
- Тесты выполняются быстро
- Тесты точны и позволяют выявить точные проблемы
Минусы агрегата:
- Написание тестов для каждого аспекта вашего приложения отнимает много времени.
- Несмотря на то, что модульные тесты пройдены, все приложение может по-прежнему не работать.
Плюсы E2E:
- Может неявно тестировать много вещей одновременно
- Тесты E2E гарантируют, что у вас есть работающая система
Минусы E2E:
- Медленная работа — часто для запуска одного сайта требуется 5 или 10 минут.
- Хрупкость — несущественное изменение, например смена класса, может вывести из строя весь ваш набор E2E.
- Тесты не могут точно определить причину сбоя
Вердикт
На мой взгляд, сочетание модульных и E2E-тестов — лучший подход. Минусы одного типа могут быть сведены на нет плюсами другого.
Например, тест E2E не скажет вам основную причину сбоя, но модульные тесты расскажут вам, в то время как модульные тесты не скажут вам, работает ли все приложение или нет, в то время как тесты E2E это сделают.
Совместное использование этих типов тестов придаст вам большую уверенность в вашем приложении, позволяя добавлять функции или проводить рефакторинг, не опасаясь краха.
Общая стратегия объединения модульных и E2E-тестов для приложения Vue.js такова:
- Напишите модульные тесты для всех ваших компонентов, включая состояния ошибок. Запустите их, прежде чем делать коммиты git.
- Напишите тесты E2E для ключевых вариантов использования вашего сайта, например, регистрация, добавление в корзину и т. д. Запустите их перед слиянием с мастером.
Если вам нужна дополнительная информация о правильном сочетании тестов, есть много хороших сообщений в блогах, таких как классический Пишите тесты. Не так много. В основном интеграция. Кент С. Доддс.
Итак, вы готовы начать тестирование. Какой инструмент вы можете использовать?
Для модульного тестирования внешнего интерфейса лучшим инструментом на данный момент является Является. Он имеет много полезных функций, например, позволяет компилировать TypeScript и современный JS до запуска тестов.
Вы можете использовать Jest вместе с Просмотр тестовых утилит который позволяет вам монтировать и запрашивать компоненты Vue.
Для E2E самым современным инструментом на данный момент является Кипарис. Другим более простым инструментом, который также хорошо работает, является Ночной дозор.
Хорошая новость заключается в том, что все эти инструменты легко добавить в приложение Vue с помощью Vue CLI 3.
Наконец, рекомендуется использовать инструмент непрерывной интеграции, такой как Трэвис или же Круг КИ который будет запускать ваши тесты в облаке (особенно хорошо для трудоемких тестов E2E) и развертывать ваш код в зависимости от прохождения всех ваших тестов.
Удачного тестирования!
Станьте старшим разработчиком Vue в 2020 году.
Изучите и освойте знания профессионалов о создании, тестировании и развертывании полнофункциональных приложений Vue в нашем последнем курсе.
