Nuxt великолепен, но модульное тестирование - это проблема.
После попытки использовать Mocha + Karma я обнаружил, что нужна сложная конфигурация веб-пакета. Я искал альтернативу и нашел отличный пример Vue + AVA Эдда Йербурга.
Я решил использовать этот пример для тестирования Nuxt. AVA великолепна, Nuxt docs используют AVA для тестирования E2E. В этой статье я объясню, как настроить модульные тесты и тесты моментальных снимков с небольшой конфигурацией.
Я использовал рекомендованный стартовый шаблон сообщества Nuxt и добавил тесты.
Настраивать
Добавьте следующие пакеты:
yarn add ava @vue/test-utils browser-env require-extension-hooks require-extension-hooks-babel require-extension-hooks-vue --dev
добавьте следующий файл
Этот файл представляет собой тестовую установку, которая гарантирует, что browser-env правильно скомпилирует компоненты Vue.
Расширить пакет со следующей конфигурацией AVA и Babel
Ava использует babel-register и тестовую установку для настройки тестов. Все тестовые файлы, расположенные в test / specs, будут протестированы. Расположение настраиваемого снимка - test / snapshots.
Составная часть
Простой компонент для тестирования:
Проверьте компонент списка:
Первый тест - это тест-снимок, который хранится в test / snapshots. Второй тест - это модульные тесты, которые проверяют, правильно ли отображается элемент в li.
Имея небольшую конфигурацию и только 1 средство запуска тестов (AVA), мы можем создавать тесты Unit, Snapshot и E2E.
Для полного примера ознакомьтесь с этим репозиторием github: https://github.com/wesssel/nuxt-unit-testing
