Этот документ призван обрисовать несколько коротких примеров того, как модульное тестирование с использованием проекта 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.
- Импортируется компонент счетчика
- AppLoadingScreen.vue (компонент Vue, который мы тестируем, импортирован)
shallowMount
импортируется из утилит Vue. Он создаетWrapper
, содержащий смонтированные и обработанные компонент Vue, но с заглушками дочерних компонентов. Заглушенный дочерний компонент - это замена дочернего компонента, отображаемого тестируемым компонентом. Более подробная информация о том, как работают заглушенные компоненты: https://stackoverflow.com/questions/52962489/what-are-stubbed-child-components-in-vue-test-utilsexpect
импортируется из 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 и модульное тестирование. Перейдите по ссылке ниже, чтобы увидеть это. 👍