Вы уже знаете, какие ключевые слова важны, прежде чем писать тесты? А как насчет методологий тестирования? Может быть, тестируем магазин Vue? Вы можете проверить все эти темы в Части 1 этой статьи.
Компонентные тесты - Использование экземпляра Vue
Компонент имеет множество структур, которые следует протестировать:
- Перехватчики жизненного цикла: например, проверьте, вызывается ли функция, когда компонент монтируется, обновляется и т. д.
- Методы: проверьте, является ли return ожидаемым значением функции или правильно ли были внесены изменения в данные.
- Наблюдатели: при изменении значения prop или data проверьте, вызывается ли наблюдатель.
- Вычисляемые свойства: проверьте, возвращает ли вычисляемое свойство заданное значение.
Компоненты могут иметь несколько функций, которые используют друг друга в качестве зависимости, и это может привести к сложному поведению. Итак, важно:
- Попробуйте сделать небольшие, простые для тестирования функции (слишком много зависимостей или сложных функций затрудняют написание тестов, а также затрудняют чтение кода).
- Функция должна возвращать значение или изменять поле данных компонента, чтобы ее было легче тестировать.
- Управляйте своей тестовой средой. Сосредоточьтесь на тестировании отдельной единицы кода, имитируя вызовы среды или зависимостей. Использование shallow вместо mount помогает контролировать отрисовку экземпляра компонента. Когда компонент подключен к хранилищу (с помощью mapActions, mapState или mapGetters), очень важно имитировать хранилище и передать его как глобальный параметр экземпляра компонента.
Когда создается экземпляр компонента, создается оболочка вокруг экземпляра компонента (также называемая vm), которая предоставляет отличный API для редактирования props, данных и многие другие свойства.
Имейте в виду, что синтаксис avoriaz (который очень похож на синтаксис vue-test-utils) используется в следующих тестах.
Тестирование хуков жизненного цикла
Компонент Vue имеет несколько крючков жизненного цикла, и для их проверки необходимо выполнить действия, которые их запускают (создать экземпляр для тестирования beforeMount и смонтированный, при его уничтожении запускается beforeDestroy и уничтожено).
Используя этот компонент:
Чтобы проверить, работают ли хуки смонтированные и уничтоженные должным образом, необходимо создать и уничтожить экземпляр этого компонента. Поскольку заглушка может применяться не только к экземпляру компонента (и, следовательно, к его методам), но и к окну, можно также проверить, обрабатываются ли события.
В приведенном ниже тесте можно увидеть, как проверяются хуки жизненного цикла:
Создание шпионов или заглушек в компоненте (BasicComponent - как вы видите в примере с подключением) вместо их создания в экземпляре (wrapper.vm ) полезен, когда вы хотите имитировать / шпионить за зависимостью, которая будет вызываться в жизненных циклах монтирования экземпляра (например, beforeMount или монтироваться).
Методы тестирования
У методов всегда должен быть четкий способ тестирования: либо путем возврата значения / обещания, либо изменения данных компонента, либо управления вызовами других функций. Обдумывание того, как будет тестироваться функция, с большой вероятностью улучшит качество кода и удобство сопровождения.
Часто поведение функций меняется в зависимости от значения параметра или вызова другой функции. Контекст следует имитировать (возможно, используя заглушки), чтобы протестировать все варианты использования.
В приведенном выше сценарии поведение setObjects function будет зависеть от результата getObjects. Чтобы протестировать оба варианта использования, необходимо управлять значением return вызова getObjects, как показано в этом тесте:
При использовании функции, зависящей от вызова API, лучше всего использовать Promise. В этом случае лучший способ продолжить - вернуть Promise.
К магазину подключен следующий компонент. Магазин должен быть полностью имитирующим, чтобы контролировать контекст теста и избегать каких-либо ошибок.
Возврат Promise позволяет заглушить вызов API и, таким образом, запускает разрешение Promise. Все утверждения должны выполняться при обратном вызове.
Учитывая, что getObjectsAction возвращает Promise (который будет выполнять запрос API для действия), хорошим способом протестировать эту функцию будет:
Этот подход (возврат обещания или цепочки обещаний) очень полезен в сценариях, где требуется имитировать запросы, чтобы избежать ошибок тайм-аут и разрешить чтобы проверить, как функция будет работать после разрешения обещания. Вместо разрешения Promise, отклоните он также запустит сценарий catch в тесте.
Наблюдатели за тестированием
наблюдатель используется для реагирования на изменения данных и может применяться к свойствам или данным компонента. Для запуска наблюдателей в тесте можно использовать методы setData или setProps.
При изменении propId запускается наблюдатель.
Этот тест будет только проверять, вызывается ли consoleLogValue с правильным параметром с помощью calledWith, поскольку нет намерения проверять, как ведет себя consoleLogValue. Это нужно сделать в другом тесте. По этой причине к consoleLogValue применяется заглушка.
Тестирование вычисленных свойств
Вычисляемые свойства обычно используются для получения значения в зависимости от одного или нескольких свойств. Вычисляемые свойства обычно представляют собой простые операции, которые не следует помещать в шаблон для упрощения обслуживания.
Для доступа к вычисляемым свойствам мы можем напрямую использовать экземпляр компонента (wrapper.vm.computedProperty). Тем не менее, setProps можно использовать для тестирования всех ветвей:
Компонентные тесты - Использование объекта
Как объяснялось ранее, все атрибуты компонентов Vue являются функциями. Такой образ мышления облегчит подход к тестам, нам нужно только знать, как составлен объект. В остальном мы просто тестируем функцию, небольшую единицу кода, у которой не должно быть много зависимостей.
Учитывая следующий компонент:
Чтобы протестировать функцию, которая требует значений из props или из данных компонента (поскольку экземпляр Vue сейчас не будет создан), необходимо создать переменную с этими значениями и передается в тестируемую функцию. В следующих тестах эта переменная будет называться «контекст».
Без экземпляра Vue при вызове функций используются свойства объекта (Object.computed, Object.methods и т. Д.). Переменная context позволяет тестируемой функции по-прежнему использовать ожидаемые значения из структуры данных экземпляра Vue.
Перехватчики жизненного цикла также могут быть вызваны с помощью свойств объекта. Такие операции, как использование функций, созданных в mapActions, можно поместить в переменную context, чтобы избежать имитации магазина (одно из основных преимуществ этого подхода). Используя следующий компонент:
Функция getInitialConfig будет помещена в переменную context, и поэтому создается шпион, чтобы понять, вызывается ли функция при создании вызывается хук.
Использование более «объектно-ориентированной» методологии позволяет писать меньше кода и в некоторых сценариях снизить сложность теста.
Заключение
Модульное тестирование иногда бывает непростым, и если вы начинаете, оно наверняка вызовет некоторую боль. Но, в конце концов, оно того стоит. Если вы все еще задаетесь вопросом о важности тестирования вашего приложения Vue, ознакомьтесь с этой статьей.
Тесты приносят большие преимущества проекту и развитию разработчика. Мышление разработчика изменится, чтобы писать лучший, более простой для тестирования и более удобный в обслуживании код с использованием чистых функций, следуя правилу Do One Thing (DOT) вместо того, чтобы перегружать единицу кода множеством обязанностей и принимать более обоснованные решения. по структуре и масштабируемости приложения.
Эта статья была сосредоточена на демонстрации некоторых примеров того, как подходить к различным доменам тестирования Vue.js, больше похожим на легкое напоминание / понимание того, как подходить к определенному сценарию, и чтобы помочь вам всем понять, что это делается при написании теста. Если какой-либо особенно полезный сценарий был пропущен или у вас есть какие-либо предложения, оставьте комментарий ниже. Мы будем благодарны за любые отзывы, и не забудьте 👏, если эта статья вам помогла!
