Настройка тестирования может быть очень сложной, особенно если вы только начинаете. Когда я начинал с Vue и Nuxt, у меня действительно не было опыта настройки конфигураций для линтинга или тестирования. Vue-cli предоставляет готовые конфигурации для нескольких видов вещей, включая настройку Jest для тестирования модулей и моментальных снимков, однако Nuxt на данный момент не предлагает чего-то похожего на vue-cli. Я хотел имитировать это поведение, но не смог найти никаких хороших ресурсов, которые бы описывали четкие и, что самое главное, простые для выполнения шаги. Эта статья служит справочным руководством для всех, кто хочет использовать Nuxt + Jest.
Кстати, всякий раз, когда я делаю что-то более сложное, я всегда записываю каждый шаг, потому что это значительно упрощает воспроизведение этого в новых проектах. Документирование этих шагов не должно быть очень тщательным (хотя в конце концов, это должно сработать), просто запишите каждую команду, которую вы использовали. Это также значительно упрощает написание статей, подобных этой, и, публикуя их, каждый может получить выгоду.
Если вы специально искали конфигурацию, подобную описанной здесь, вы, вероятно, уже знаете о преимуществах тестирования. Тестирование делает возможным правильный CI / CD, что, откровенно говоря, одна из самых крутых вещей в разработке программного обеспечения (исходящая от человека, который никогда не хотел ничего тестировать). Однако, если вы этого не сделаете, я настоятельно рекомендую вам узнать больше о том, какую пользу тестирование может принести вам и вашему проекту.
И последнее замечание: мне действительно не нравится, когда я пытаюсь настроить что-то конкретное (например, линтинг), но обучающие программы, которые я нахожу, просто не работают. Пожалуйста, дайте мне знать, если что-то с этой конфигурацией не работает. Я действительно не хочу никого тратить зря.
1. Установка зависимостей
Чтобы установить зависимости разработки, выполните следующую команду в корневом каталоге вашего проекта:
npm install @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0 @vue/test-utils jest babel-jest jest-serializer-vue vue-jest -D
На момент написания этой статьи [email protected] требуется одноранговый узел babel-core@^6.25.0, поэтому мы дополнительно должны установить babel@core^7.0.0-bridge.0
2. Конфигурация Jest
Создайте jest.config.js в корневой папке и добавьте следующее содержимое:
Поскольку сам Jest не понимает однофайловых компонентов Vue, мы даем ему указание использовать vue-jest в качестве препроцессора. Кроме того, хотя последние версии Node уже поддерживают большинство функций ES2015, вы все равно можете использовать синтаксис модулей ES и функции stage-x в своих тестах, которые обрабатываются с помощью babel-jest.
3. Конфигурация Babel
Как указано в документации Vue для тестирования однофайловых компонентов:
Конфигурация Babel по умолчанию отключает транспиляцию модулей ES, потому что webpack уже знает, как обрабатывать модули ES. Однако нам нужно включить его для наших тестов, потому что тесты Jest запускаются непосредственно в Node.
[ОБНОВЛЕНИЕ 11/2019]: babel.config.js был изменен для использования версии 7 babel.
Поэтому мы создаем файл с именем babel.config.js со следующим содержимым:
4. Добавьте тестовый скрипт в package.json.
Теперь осталось добавить тестовый скрипт в package.json, как показано ниже. В этом случае строка "test": "jest" указывает вашему проекту запустить набор тестов Jest при вводе npm run test в командной строке.
5. Написание тестов
Конечно, весь смысл этой статьи заключается в том, чтобы иметь возможность тестировать компоненты Vue, поэтому мы этим и займемся здесь. В качестве примера я собираюсь использовать компонент логотипа по умолчанию, который Nuxt генерирует при использовании npx create-nuxt-app.
Jest ожидает, что тесты компонента будут в папке с именем __tests__ (обратите внимание на двойное подчеркивание). По соглашению папки __tests__ всегда находятся в одном каталоге с вашими компонентами. Например, если у вас есть такая структура папок: components/Logo.vue, тест для компонента Logo будет находиться в components/__tests__/Logo.spec.js.
Обратите внимание, что тесты, показанные ниже, действительно неполны и проверяют только правильность монтирования и рендеринга компонента, однако этого достаточно, чтобы вы начали.
6. Запуск тестов
Теперь запустите тесты с npm run test. Он должен напечатать что-то вроде этого:
Экспериментальная установка с vue-cli
Вы, наверное, слышали о vue-cli со всеми его плагинами и конфигурациями, которые можно легко установить с помощью одной команды. Хотя нет никаких упоминаний о том, что Nuxt совместим с ним, вы действительно можете использовать его в этой конкретной ситуации для настройки Jest.
Просто запустите эту команду в новом проекте, еще не настроенном для тестирования:
vue add @vue/unit-jest
Он автоматически создаст все необходимые файлы (.babelrc и jest.config.js) и установит необходимые зависимости. Он также добавит этот скрипт в package.json:
“test:unit”: “vue-cli-service test:unit”
Что вам нужно будет перезаписать на:
"test": "jest"
Кроме того, он создаст папку tests в корне вашего проекта, которую вы можете удалить. Теперь просто выполните шаги 5. и 6.
Последнее замечание: хотя он работает, я не уверен, буду ли я использовать его в производстве, поскольку не знаю, будет ли он совместим с Nuxt в будущем.
Git Repo
Если вы хотите увидеть эту конфигурацию в действии, я создал небольшой репозиторий git, который вы можете клонировать. Ветка master содержит ручную настройку, а ветка vue-cli содержит экспериментальную конфигурацию.
