Этот документ призван обрисовать несколько коротких примеров того, как модульное тестирование с использованием проекта Vue. Это руководство специально разработано для использования при следующей настройке Vue.

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

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

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

Создание тестовых файлов

Файлы, выбранные для тестирования, оканчиваются на .spec.js. Вы можете увидеть, как это установлено, или изменить это внутри package.json.

package.json

"scripts": {
    "test:unit": "vue-cli-service test:unit src/**/*.spec.js"
  }

Как проводить тесты?

В терминале типа:

npm run test:unit

Давайте посмотрим, как будет выглядеть файл базового модульного теста…

Приведенные ниже числа относятся к приведенному выше блоку кода AppLoadingScreen.spec.js.

  1. Импортируется компонент счетчика
  2. AppLoadingScreen.vue (компонент Vue, который мы тестируем, импортирован)
  3. shallowMount импортируется из утилит Vue. Он создает Wrapper, содержащий смонтированные и обработанные компонент Vue, но с заглушками дочерних компонентов. Заглушенный дочерний компонент - это замена дочернего компонента, отображаемого тестируемым компонентом. Более подробная информация о том, как работают заглушенные компоненты: https://stackoverflow.com/questions/52962489/what-are-stubbed-child-components-in-vue-test-utils
  4. expect импортируется из chai. expect - это связанный язык для построения утверждений. . Утверждения используются для проверки определенной вещи в коде. Некоторые примеры того, что можно связать с ожидаемым для проверки https: // www.chaijs.com/api/bdd/

6. describe используется для обозначения того, что вы тестируете. Это также будет отображаться в терминале после запуска теста. В этом случае мы тестируем компонент appLoadingScreen.

9. beforeEach() - это метод Mocha, который выполняет аргумент обратного вызова перед каждым из тестов. Мы запускаем shallowMount() внутри beforeEach(), поэтому компонент монтируется перед каждым тестом.

10. Используем метод shallowMount(), помещающий внутрь наш тестовый компонент.

13. it - это то место, где вы выполняете индивидуальные тесты. Вы должны уметь описывать тесты, в нашем случае «он должен отображать Spinner при монтировании». Это четко описывает, каким будет тест.

14. expect от чай. Утверждает, что что-то надо тестировать. В нашем случае мы ищем в нашем компоненте компонент Spinner, используя find из vue utils. Find возвращает оболочку первого узла DOM или селектора соответствия компонента Vue. Как мы и ожидаем, мы можем объединить ключевые слова в цепочку. В этом случае мы добавляем to.be.true

Выполнение указанного выше теста npm run test:unit

Отображает результаты теста, описанного как «AppLoadingScreen» и «должен отображать Spinner при монтировании».

Резюме

Это базовый модульный тест с использованием мокко и Vue.

Как вы понимаете, каждый компонент может иметь разную логику с необходимым синтаксисом нового теста. Vuex обычно используется в приложениях Vue, что добавляет еще один уровень сложности при тестировании.

Во второй части рассматривается Vuex и модульное тестирование. Перейдите по ссылке ниже, чтобы увидеть это. 👍

Объедините тестирование в Vue & Mocha, часть 2