Как будет выглядеть модульное тестирование с Composition API Vue 3?

Чтобы пользователи могли опробовать Composition API на ранней стадии, команда Vue выпустила плагин, который позволяет нам опробовать его в Vue 2. Вы можете найти его здесь.

Это очень быстрая статья, в которой проверяется, как новый Composition API взаимодействует с vue-test-utils, официальной библиотекой модульных тестов для компонентов Vue. Спойлер: работает точно так же.

Тестирование сборки компонента с помощью Composition API не должно отличаться от тестирования стандартного компонента, поскольку мы тестируем не реализацию, а выходные данные (что делает компонент, а не как это делает). В этой статье будет показан простой пример компонента, использующего Composition API в Vue 2, и то, как стратегии тестирования такие же, как и у любого другого компонента.

Тестовый компонент

Ниже приведено Hello, World Composition API, более или менее. Если вы чего-то не понимаете, прочтите RFC или мою статью или загляните в Google; есть много ресурсов о Composition API.

Здесь нам нужно будет протестировать две вещи:

  1. При нажатии кнопки увеличения state.count увеличивается на 1?
  2. Правильно ли отображается сообщение, полученное в реквизите (преобразовано в верхний регистр)?

Проверка сообщения реквизита

Проверить правильность отображения сообщения несложно. Мы просто используем propsData для установки значения свойства, как описано здесь.

Как и ожидалось, это очень просто - независимо от того, как мы составляем компоненты, мы используем один и тот же API и одни и те же стратегии для тестирования. У вас должна быть возможность полностью изменить реализацию, и вам не нужно прикасаться к тестам. Не забудьте тестировать выходные данные (обычно визуализированный HTML) на основе заданных входных данных (реквизиты, инициированные события), а не реализации.

Тестирование нажатия кнопки

Так же просто написать тест, чтобы убедиться, что нажатие кнопки увеличивает state.count. Обратите внимание, что тест отмечен async; подробнее о том, почему это необходимо, см. Имитация пользовательского ввода.

Опять же, совершенно неинтересно - мы trigger событие щелчка и утверждаем, что отображаемое count увеличилось.

Заключение

В статье показано, как тестирование компонента с помощью Composition API идентично тестированию с использованием традиционного API опций. Идеи и концепции такие же. Главное, что нужно усвоить, - это при написании тестов делать утверждения на основе входных и выходных данных. vue-test-utils не волнует, как вы составляете свои компоненты; все существующие методы и API применяются к Composition API. Отличные новости!

Должна существовать возможность рефакторинга любого традиционного компонента Vue для использования Composition API без необходимости изменения модульных тестов. Если при рефакторинге вам нужно изменить тесты, скорее всего, вы тестируете реализацию, а не результат.

Composition API - это новая захватывающая функция, которая является полностью аддитивной, поэтому нет необходимости использовать его немедленно, однако, независимо от вашего выбора, помните, что хорошие модульные тесты подтверждают конечное состояние компонента без учета деталей реализации.

Первоначально опубликовано в Руководстве по тестированию Vue.