Разница между "mount" и "shallowMount" в Vue-Test-Utils?

Отказ от ответственности: я довольно плохо знаком с Vue, JavaScript и веб-фреймворками в целом.

Я пытаюсь ознакомиться с некоторыми базовыми тестами модулей и компонентов, используя Jest и vue-test-utils.

Я прочитал документы на vue-test-utils' mount () и shallowMount (), но я не уверен, когда использовать один поверх другого (они очень похожи).

Согласно документам на shallowMount():

Как и mount, он создает оболочку, которая содержит смонтированный и визуализированный компонент Vue, но с заглушенными дочерними компонентами.

Что именно подразумевается под "заглушенными дочерними компонентами"? Можно mount() а также shallowMount() быть взаимозаменяемыми?

2 ответа

Решение

Документация подразумевает под "заглушенными дочерними компонентами" то, что все компоненты в тестируемом компоненте не будут отображаться. Вместо этого у вас будет компонент-заполнитель.

Это предотвращает паразитирование ваших тестов поведением других компонентов.

На мой взгляд, вы всегда должны монтировать компоненты при выполнении модульных тестов и просто монтировать их при выполнении тестов во всем приложении.

Я не согласен с Томасом Ферро, хотя его объяснение их функции верно, но я не согласен с тем, какой метод использовать. По моему мнению, вы всегда должны использоватьmountвместоshallowMount.

Чтобы объяснить это, я сошлюсь на статью Мартина Фаулера: https://martinfowler.com/articles/mocksArentStubs.html.

Существует два разных типа TDD: макетный и классический TDD. Когда вы все имитируете, ваш тест будет знать много о (некоторых) зависимостях. Таким образом, если срабатывает метод из дочернего компонента/зависимости, ваш тест узнает об этом.

В классическом TDD вам следует имитировать только пограничный уровень (веб-вызовы, вызовы файловой системы, вызовы базы данных, вызовы просмотра), и ничего больше. Таким образом, название «модуль» или «Тестируемая система» не подразумевает отдельный объект, а может представлять собой набор объектов.

Это означает, что стиль макета также сломается, когда этот метод изменит свое имя. Вместо этого преимущество классического TDD заключается в том, что вы не знаете имя этого метода (и вас это не волнует).

Думайте об этом (классическом TDD), как о вводе некоторых переменных в качестве входных данных и проверке выходных данных или состояния. Игнорируйте все детали между ними. Преимущество этого является одним из преимуществ TDD, которое теряется в стиле мокаста: вы можете бесстрашно рефакторить и преобразовывать свой код. Если вы измените имя метода зависимости (рефлексирование), ваш тест все равно пройдет, поскольку метод не подвергается издевательству.

Обработать тест, если зависимость не существует (только в конструкции). Опять же, единственными исключениями являются веб-вызовы (http-запросы), вызовы репозитория (базы данных/файловые системы), вызовы просмотра.

Поэтому, если вы выполните рефакторинг дочернего компонента в основной компонент или в другой дочерний компонент, ваш тест все равно пройдет. Потому что классический TDD проверяет ввод и вывод (и состояние), а не зависимости.

Другие вопросы по тегам