Модульное тестирование - это то, с чем у меня еще не было возможности профессионально поработать, но, поскольку я не вижу причин, чтобы все равно не заниматься им, я начал свой путь с этого момента. С Jest.
Что я делаю?
В этом примере я делаю регистрационный лист на рок-фестиваль, где мне нужен минимальный набор деталей для каждой группы, подающей заявку. Например, мы хотим предложить специальное меню для участников нашей веганской группы. Это будет включать валидацию, и валидация должна быть протестирована.
Я хочу, чтобы это выглядело примерно так:
Мы хотим проверить введенное название группы, а также проверить некоторые другие вещи, например, отсутствие панк-групп, играющих в пятницу, и отсутствие веганских дэт-металлических групп.
Настройка вещей
Для начала мы хотим использовать новейшие функции JavaScript, поэтому нам понадобится узел. Инициализируйте его, запустив node init
. После этого мы хотим установить веб-пакет, чтобы связать наш JS и некоторые компоненты babel для транспиляции нашего кода:
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env babel-polyfill
Затем создайте файл .babelrc и установите для предустановок значение env (используйте последнюю версию JS).
{ "presets": [ "@babel/presets-env" ] }
Добавьте сценарий сборки в файл package.json для запуска webpack в режиме разработки.
"scripts": { "build": "webpack --mode development" },
Создайте папку src в корне и добавьте файл index.js, предупреждающий «Hello world», чтобы убедиться, что все работает.
Теперь запустите сценарий сборки npm run build
Это должно сгенерировать файл dist / main.js, на который вы можете ссылаться в своем файле index.html. Сделайте это и убедитесь, что на странице появляется сообщение «Hello world».
Заставить вещи работать
Теперь, когда кажется, что все работает, мы хотим дать кнопке регистрации некоторые функции. Сделаем так!
Давайте добавим обработчик кликов к кнопке, которая извлекает данные из формы и начинает их проверку:
Установка Jest
Прежде чем мы начнем реализовывать функцию проверки, мы хотим установить Jest, чтобы мы могли его протестировать. Установите Jest так:
npm install --save-dev jest babel-jest
Добавьте скрипт для запуска вашего теста шутки в package.json:
"test": "jest --colors"
Теперь вы можете запустить свои тесты, написав npm run test
, и по умолчанию будет выполняться поиск всех папок в вашей папке src с именем __tests__ и файлов с именем something.test.js в этих папках. Вот как сейчас выглядит моя структура:
Добавление тестов
Я обновил свой код тестами, о которых упоминал в начале. Jest предлагает логический синтаксис для написания тестов и очень понятен.
Используйте describe
, чтобы создать раздел тестов и написать в нем все тесты, которые вы хотите для этого раздела. Я создал раздел под названием validateSignUp
и разместил в нем тесты для функции validateSignUp. Вот как это обернулось для меня:
При запуске этих тестов с npm run test
это результат, который вы получите, когда все будет реализовано правильно:
Что ж, это было очень весело, и я определенно могу понять достоинства модульного тестирования. Он не только выполняет часть тестирования, при правильном использовании он также помогает вам лучше писать код.
Вот как выглядел мой код: