Как вы можете протестировать свои программы Vue.js менее чем за семь минут

1656677778 kak vy mozhete protestirovat svoi programmy vuejs menee chem za

от Мукул Кханна

oyCA6nCOYqwISvRIZcbJbxZCyg4I8CTUzb29
Источник

Прежде чем мы углубимся в реализацию, давайте разберем несколько понятий.

Что такое тестирование?

Ручная попытка всех возможных входных данных для основного средства проверки формы может быть громоздкой.

Это может показаться несложным для маленького сайта. Но для более крупных и сложных веб-приложений, состоящих из десятков компонентов вместе с их функциями, маршрутами, состояниями, мутациями и т.п., невозможно или целесообразно тестировать функционирование всех этих составляющих.

Автоматизация этой части оценки написанного нами кода на основе проб и ошибок известна как тестирование или автоматизированное тестирование.

Эдд Ербург, основной член команды Vue и сопровождающий vue-test-utils (ранее Авариаз), определяет автоматизированное тестирование в своей книге следующим образом:

Автоматизированное тестирование – это практика написания программ для выполнения тестов кода программы. После написания программ они могут выполняться автоматически.

В основном существует три типа тестов:

  1. Модульные тесты
  2. Сквозные тесты
  3. Моментальные тесты

Модульные тесты

Это основные тесты, которые проверяют правильность работы атомарных элементов веб-сайта (компоненты и функции Vue). Эд звонит им составные контракты. Ожидается, что каждый компонент будет работать так, как он обещал, и эти тесты проверяют их выполнение.

End to end (E2E) тесты

Тесты E2E проверяют весь рабочий процесс сайта. Можно сказать, что один тест E2E состоит из нескольких подробных модульных тестов. Они медленные, но проверяют всю функциональность сайта.

Но их тоже трудно наладить, поскольку трудно определить, какие части не работали, как предполагалось. Может быть несколько причин неудачи тестов.

Моментальные тесты

Ошибки в коде влияют не только на функциональность сайта, но и на позиционирование компонентов в пользовательском интерфейсе. Тесты снимков проверяют наличие подобных изменений во внешнем виде программы. Он предполагает рендеринг пользовательского интерфейса, создание снимка экрана и сравнение его с эталонным изображением, которое хранится вместе с тестом. Тест не удается, если два изображения не совпадают.

r2Gl95lvS3RrdUTyl5B-zZnYBDHzhDSyZyA1
Пирамида тестирования

Эти тесты также помогают разработчикам написать надлежащую документацию кода, что очень полезно в больших программах с несколькими участниками.

Теперь, когда мы убедились, что тестирование может помочь нам сэкономить много времени и оптимизировать наш код, давайте посмотрим, как тесты настраиваются, создаются и запускаются.

Мы будем использовать vue-test-utils как служебная библиотека тестирования для Vue.js. Теперь нам тоже нужно выбрать тестовый бегун. Есть из чего выбрать, но Jest и Mocha-Webpack все равно хороши. Они просто имеют некоторые компромиссы между предыдущей конфигурацией и поддержкой SFC (компонентов с одним файлом).

Мы будем использовать 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, в котором мы будем настраивать среду тестирования.

PgscjiR-rzsjW-igS5mBhwBcLJgSR4x25KL1

Установление зависимостей

Чтобы установить vue-test-utils, мокко, и mocha-webpack:

npm install --save-dev @vue/test-utils
npm install --save-dev mocha mocha-webpack

Чтобы эмулировать подмножество среды браузера для выполнения наших тестов, мы установим jsdom и jsdom-global:

npm install --save-dev jsdom jsdom-global

Некоторые из зависимостей, которые мы импортируем в наших тестах, веб-пакета трудно объединить. Итак, чтобы удалить их из процесса комплектования и увеличить скорость тестовой загрузки, мы устанавливаем наружные узлы:

npm install --save-dev webpack-node-externals

Vue рекомендует ожидание как библиотеку утверждений, которая по сути решает, проходит ли тест неудачно, в зависимости от полученного аргумента.

npm install --save-dev expect

Нам нужно сделать его общедоступным во избежание его импортирования в каждом отдельном тесте. Мы создаем каталог под названием тест в корневом каталоге и создайте файл под названием test/setup.js . Импортируйте модули с помощью требовать:

//setup.js
require('jsdom-global')()
global.expect = require('expect')

Мы также можем включить покрытие кода в результаты тестирования с помощью Стамбул подключать чтобы получить такой отчет:

RJll7uceQ3TW8cMj9piJI0Lk7-JTh8hdKxvX

Он используется для описания степени выполнения исходного кода при запуске определенного набора тестов.

npm install --save-dev nyc babel-plugin-istanbul

Также в .babelrc в плагины массив, доп Стамбул:

//.babelrc
plugins": ["transform-vue-jsx", "transform-runtime", "istanbul"]

Итак, мы установили все зависимости, и пора сделать окончательные конфигурации, прежде чем мы сможем начать писать тесты.

в package.jsonнам нужно добавить a тест сценарий, запускающий тест:

//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.

Каждый тестовый файл будет иметь a ‘.spec.js’ расширение.

В каталоге test мы добавляем тестовый файл 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 <h2> tag text',function(){                const wrapper = shallow(HelloWorld)        const h2= wrapper.find('h2')        expect(h2.text()).toBe('Essential Links')        })})

Затем мы создаем то, что мы можем назвать a набор тестовиспользуя описать() метод основания тестирования Mocha. Этот набор тестов, по сути, объединяет несколько тестов в один, а также предоставляет некоторую информацию о тестах и ​​компонентах.

В этой функции описания мы выполняем обратный вызов функции, которая определяет тестовые случаи с помощью это() функция. Каждый метод it() описывает тестовый пример с целью теста как первого параметра, за которым следует функция обратного вызова, определяющего тест.

Затем:

  • Мы создаем оболочку компонента Vue
  • Используйте его Найти() метод для получения всех элементов тега

  • Сравните его текст с тем, чем он должен быть.

ура! Наш тест готов к запуску.

npm run test
U2cWkbO4QNdUel3SyeDq8zTLzjYH0Xco0saV

Итак, наш тест прошел успешно – код смог найти тег

в компоненте HelloWorld.vue с текстом Essential Links.

Теперь, если мы сменим ожидаемый тест на что-либо другое, тест будет неудачным.
Я изменил это на:

expect(h2.text()).toBe('Essential Linx')

и тест проваливается. Ошибка неудачного теста достаточно описательна, и вы можете увидеть, что код ожидал и что он получает:

y1-YwOLTgYsJbbC8IxZ8ukWdaBsYf8xPdgaT

Мы можем добавить несколько тестов в один тестовый файл, используя несколько это() методы и ожидания разных условий.

describe('HelloWorld.vue',function(){    
it('Checking <h2> tag text',function(){        const wrapper = shallow(HelloWorld)                const h2 = wrapper.find('h2')        expect(h2.text()).toBe('Essential Links')        }),    
it('Checking <h1> tag text',function(){        const wrapper = shallow(HelloWorld)        const h1 = wrapper.find('h1')        expect(h1.text()).toBe('Welcome to Your Vue.js App')        })
})

Здесь мы также проверяем, тег

отражает то, что он должен.

Это был достаточно простой тест, который просто дает вам понимание того, как тесты настраиваются, кодируются и запускаются, даже не открывая браузер или запуская сервер.

Ссылка на репозиторий GitHub находится здесь.

Подведению

Книга Эдда Ербурга «Тестирование приложений Vue.js» очень помогла мне получить более широкое представление о важности тестирования и способах его внедрения. Я бы рекомендовал его всем, кто хочет изучить тестирование за пределы контента для начинающих и действительно окунуться в него.

Кроме того, я посвятил некоторое время концепциям TDD (Test Driven Development) и с нетерпением жду возможности написать учебник для начинающих о мире TDD из Vue.js.

Пожалуйста, оставьте хлоп или два, если вам понравился пост. Спасибо 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *