Модульное тестирование - это то, с чем у меня еще не было возможности профессионально поработать, но, поскольку я не вижу причин, чтобы все равно не заниматься им, я начал свой путь с этого момента. С 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 это результат, который вы получите, когда все будет реализовано правильно:

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

Вот как выглядел мой код: