Эта статья основана на Модульное тестирование в Vue & mocha (часть 1)

Какая настройка проекта?

Какие пакеты необходимы?

Опираясь на первую статью, теперь мы можем начать смотреть, как мы будем проводить тестирование при использовании Vuex.

.spec.js файл, использующий vuex

Цифры ниже относятся к блоку кода Modal.spec.js выше.

  1. Мы импортируем vuex, поскольку собираемся создать хранилище внутри тестового файла.
  2. createLocalVue из vue utils. Используется для создания локального класса vue, чтобы мы могли использовать компоненты, плагины и миксины, не загрязняя глобальный класс vue.

4. sinon импортирован. sinon позволяет создавать тестовые двойники. Например, имитация методов из компонента, который мы хотим включить в тест.

5. sinon-chai импортирован. Расширяет Chai утверждениями для фиктивного фреймворка Sinon.JS.

6. Импортируется модальный компонент (компонент, который мы тестируем).

7. BaseButton импортирован - мы должны импортировать этот компонент, поскольку он зарегистрирован глобально.

8. chai.use вызывается и настроен на использование sinonChai

11. createLocalVue сохраняется в переменной для повторного использования.

12. Настройте localVue на использование vuex.

13. Зарегистрируйте компонент BaseButton, как он был ранее зарегистрирован глобально.

16. Создайте переменную магазина.

17. Создайте геттеры, соответствующие геттерам компонентов. (здесь мы можем изменить значения, чтобы помочь нам проверить, например, если что-то скрыто в v - если мы можем изменить значение на true в тесте, чтобы оно стало доступным)

18. Создайте действия, соответствующие компоненту.

25. Сохраните mockMethod, используя sinon.spy(). Шпионский вызов - это объектное представление отдельного вызова шпионской функции, которая может быть фальшивым, шпионским, заглушкой или ложным методом.

28. Создается новое хранилище, передающее геттеры и действия.

33. Мы создаем версию компонента с неглубоким монтированием с переданными localVue и store.

41. setMethods позволяет использовать методы из магазина, в этом случае мы используем созданное нами действие, соответствующее действию файла компонента TOGGLE_MODAL. Https://vue-test-utils.vuejs.org/api/wrapper-array/#setmethods

42. find используется для поиска селектора в компоненте. Из vue Utils https://vue-test-utils.vuejs.org/api/wrapper/#find

42. trigger используется для передачи события, в данном случае щелчок - это событие, которое запускается для этого селектора. Https://vue-test-utils.vuejs.org/api/wrapper/trigger.html

43. Вот и тест. Мы используем expect, чтобы утверждать, что mockmethod to.have.been.called.calledWith цепные методы происходят из chai и могут использоваться для тестирования множества сценариев. calledWith может проверить, какие аргументы были переданы, таким образом мы можем быть уверены, что то, что передано, не изменится, иначе тест завершится неудачно и покажет причину.

Резюме

С помощью этого теста мы можем проверить, что было вызвано действие магазина, проверив, что произойдет, если мы инициируем событие щелчка на селекторе.

Сама логика магазина может быть протестирована независимо сама по себе, что даст вам подробный тест того, что делают каждое действие и мутация.

Есть еще много вещей, которые можно протестировать, одна из главных задач - знать, что тестировать и почему вы тестируете. Вот хорошая статья об этом:



Знание того, что тестировать - модульное тестирование компонентов Vue
Самый частый вопрос о модульном тестировании компонентов Vue, который я вижу, - это« что именно я должен тестировать? medium.com »



После базовой настройки и общего представления о том, что делают основные части кода, вы можете опираться на это и использовать определенный синтаксис для тестирования большинства / всех компонентов vue. 👍