Автор оригинала: FreeCodeCamp Community Member.
Мукуль Ханна
Прежде чем мы погрузимся в реализацию, давайте получим несколько концепций очищенных.
Что такое тестирование?
Вручную пробовать все возможные входы в основной валидатор формы могут быть громоздкими.
Это может показаться не большим для небольшого сайта. Но для более крупных и сложных веб-приложений, состоящих из десятков компонентов наряду с их функциями, маршрутами, состояниями, мутациями и т. Д., Это не осуществимо или целесообразно проверить функционирование всех этих составляющих.
Автоматизация этой части пробной и на основе ошибок оценки кода, которую мы написали, известен как Тестирование или автоматизированное тестирование Отказ
EDD Yerburgh, член Core Vue Team и сопровождающий Vue-Test-Utils (ранее avoriaz ), определяет автоматическое тестирование в его книга в качестве:
Есть по существу три типа испытаний:
- Агрегатные тесты
- Конец Для окончания тестов
- Тесты снимки
Агрегатные тесты
Это основные тесты, которые проверяют, правильно работают атомные элементы веб-сайта (компонентов VUE). EDD вызывает их Компонентные контракты Отказ Ожидается, что каждый компонент будет работать так, как он пообещал делать, и эти тесты убедитесь, что они выполняются.
Конец до конца (E2E) тесты
E2E тесты проверьте весь рабочий процесс сайта. Можно сказать, что один тест E2E состоит из нескольких тестов гранулированных единиц. Они медленные, но они проверяют всю функциональность сайта.
Но они также трудно отлаживать, потому что трудно найти, какие части не работали, как они должны были. Там может быть более одной причины, по которой тесты не удались.
Тесты снимки
Ошибки в коде не только влияют на функциональность сайта, но и позиционирование компонентов в пользовательском интерфейсе. Испытания на снимках проверьте такие изменения в появлении приложения. Он включает в себя рендурирование пользовательского интерфейса, захватывающий скриншот и сравнивая его со ссылочным изображением, хранящимся вместе с тестом. Тест не удается, если два изображения не совпадают.
Эти тесты также помогают разработчикам писать правильную документацию кода, что вполне полезно в крупных приложениях с несколькими авторами.
Так что теперь, когда мы установили, что тестирование может помочь нам сэкономить много времени и оптимизировать наш код, давайте посмотрим, как настроен тесты, созданные и запускаются.
Мы будем использовать Vue-Test-Utils Как тестирование библиотеки утилиты для Vue.js Отказ Теперь нам также нужно выбрать тестовый бегун. Есть много, чтобы выбрать, но шутку, но Mocha-Webpack одинаково хорошо. У них просто есть некоторые компромиссы между конфигурацией APPFRONT и поддержкой SFCS (одновременные файловые компоненты).
Мы будем использовать Mocha-WebPack Конфигурация для этой демонстрации.
Создание проекта
npm install vue
npm install --global vue-cli
vue init webpack vue-testing
cd vue-testing
npm install
npm run dev
Используя вышеуказанные команды, создайте проект Vue WebPack, в котором мы будем настроить среду тестирования.
Установка зависимостей
Чтобы установить Vue-Test-Utils , Мока, и mocha-webpack:
npm install --save-dev @vue/test-utils
npm install --save-dev mocha mocha-webpack
Чтобы эмулировать подмножество среды браузера для запуска наших тестов, мы установим jsdom и jsdom-global l:
npm install --save-dev jsdom jsdom-global
Некоторые из зависимостей, которые мы импортируем в наших тестах, сложно для веб -пака для пучка. Итак, чтобы иметь возможность удалить их из процесса объединения и увеличить тестовую скорость загрузки, мы устанавливаем Узел-внешние:
npm install --save-dev webpack-node-externals
Vue рекомендует ожидать В качестве библиотеки утверждения, которая по существу решительно решает, проходит ли тест или проходит в зависимости от аргумента, который он получает.
npm install --save-dev expect
Нам нужно сделать его во всем мире доступным, чтобы не импортировать его в каждый тест. Мы создаем каталог с именем Тест В корневом каталоге и создайте файл с именем Тест/setup.js Отказ Импортируйте модули с помощью требовать :
//setup.js
require('jsdom-global')()global.expect = require('expect')Мы также можем включать покрытие кода в результатах теста, используя Стамбул плагин Чтобы получить отчет, как это:
Используется для описания степени, в которой исходный код приложения выполняется при определенном тестовом наборе.
npm install --save-dev nyc babel-plugin-istanbul
Также в .babelrc В плагины Массив, добавить Стамбул:
//.babelrc
plugins": ["transform-vue-jsx", "transform-runtime", "istanbul"]
Поэтому мы установили все зависимости, и пришло время сделать окончательные конфигурации, прежде чем мы сможем начать писать тесты.
В Package.json , нам нужно добавить тестовое задание Сценарий, который запускает тест:
//package.json
"scripts":{"test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config build/webpack.base.conf.js --require test/setup.js test/**/*.spec.js"
}
Нам также необходимо указать файлы, которые необходимо включить для покрытия кода в Package.json:
//package.json
"nyc":{ "include":[ "src/**/*.(js|vue)" ], "instrument":false, "sourceMap":false}Последняя настройка перед записью теста будет добавлять следующее в WebPack.base.conf.js:
//webpack.base.conf.js
if (process.env.NODE_ENV === 'test'){ module.exports.externals = [require('webpack-node-externals')()] module.exports.devtool = 'inline-cheap-module-source-map'}Мы можем выполнить наш тест на встроенном Vue компоненте, который поставляется с боковой панелью WebPack.
Каждый тестовый файл будет иметь ‘.spec.js’ расширение.
В тестовом каталоге мы добавляем тестовый файл testone.spec.js.
//testOne.spec.js
import {shallow} from '@vue/test-utils'import HelloWorld from '../src/components/HelloWorld.vue'
Начнем с импорта неглубокий от Vue-Test-Utils Отказ Неглубокий создает обертка Для Vue компонента, на котором мы хотим запустить тест. Эта обертка – это объект, который содержит установленный компонент и методы для тестирования частей кода. Затем мы импортируем компонент Vue, на котором мы запустим тест.
//testOne.spec.js
describe('HelloWorld.vue',function(){ it('Checking tag text',function(){ const wrapper = shallow(HelloWorld) const h2= wrapper.find('h2') expect(h2.text()).toBe('Essential Links') })})
Тогда мы создаем то, что мы можем назвать Тестовый люкс , используя Опишите () Способ тестирования Mocha. Этот тестовый набор в основном группам множества тестовых случаев в один наряду с предоставлением некоторой информации о тестах и компонентах.
В этом описать функцию, мы обращаемся к функции, которая указывает тестовые случаи с использованием Это () функция. Каждый метод IT () описывает тестовый случай с целью теста в качестве первого параметра, за которым следует функция обратного вызова, определяющая тест.
Потом:
- Мы создаем обертку Vue компонента
- Использовать его Найти () Метод для получения всех элементов тегов
- Сравните свой текст с тем, что он должен быть.
Ура! Наш тест готов к запуску.
npm run test
Таким образом, наш тест был успешным – код смог найти тег
в компоненте helloworld.vue с “основными ссылками” в качестве текста.
Теперь, если мы изменим ожидаемый тест на что-нибудь еще, тест потерпит неудачу. Я изменил это на:
expect(h2.text()).toBe('Essential Linx')и тест терпит неудачу. Неудачная ошибка теста довольно описана, однако, и вы можете увидеть, что ожидал код, а что он получает:
Мы можем добавить несколько тестовых случаев в одном тестовом файле, используя несколько Это () Методы и ожидания разных условий.
describe('HelloWorld.vue',function(){ it('Checking tag text',function(){ const wrapper = shallow(HelloWorld) const h2 = wrapper.find('h2') expect(h2.text()).toBe('Essential Links') }),
it('Checking tag text',function(){ const wrapper = shallow(HelloWorld) const h1 = wrapper.find('h1') expect(h1.text()).toBe('Welcome to Your Vue.js App') })
})
Здесь мы также проверяем, если тег
оказывает, что он должен.
Таким образом, это был довольно базовый тест, который просто дает вам понимание того, как тесты настроены, закодированы и запущены, даже не открывая браузер или запуска сервера.
Ссылка на репозиторий GitHub – здесь Отказ
Обертывание
Книга EDD Yerburgh ‘ Тестирование приложений Vue.js «Мне очень помогли получить более широкую картину важности тестирования и как его реализовать. Я бы порекомендовал его всем, кто хочет учиться тестирования за рамки объема контента новичка и действительно погрузиться в него.
Кроме того, я проводил некоторое время на концепциях TDD (Test Drivening) и с нетерпением ждем написания учебника для начинающих о мире TDD с Vue.js.
Пожалуйста, оставьте хлопок или два, если вам понравилось сообщение. Спасибо:)
Оригинал: “https://www.freecodecamp.org/news/testing-vue-js-applications-vue-test-utils-39ec26ddaa4e/”