По словам Майкла Фезерса, «любой код без тестов является унаследованным кодом». Таким образом, вы как разработчик обязаны избегать создания устаревшего кода с помощью разработки через тестирование (TDD).
В ReactJS доступно множество инструментов для модульного тестирования, но мы рассмотрим Enzyme и Jest.
Что такое разработка через тестирование (TDD)?
Разработка через тестирование (TDD) – это метод программирования, который позволяет разработчикам писать код только в том случае, если автоматический тест не пройден, тем самым избегая дублирования кода.
Основная цель TDD — писать более понятный и свободный от ошибок код.
Как разработчику, вам нужно писать тесты для каждой небольшой функциональности приложения. Это циклический процесс, и каждый цикл начинается с написания модульного теста.
Разработка через тестирование может быть легко скомпилирована в 4 простых шага:
Напишите тест. Сначала вы напишете тест для всех возможных задач.
Выполните тест. Напишите минимальный код, необходимый для прохождения теста.
Рефакторинг вашего кода — Импровизируйте с качеством кода
Повторите процесс — Теперь повторите этот процесс для каждой новой функции, которую вы добавляете в приложение.
Важность разработки через тестирование (TDD)
У вас есть четкое представление о том, что вы пытаетесь создать, прежде чем писать фактический код
Высокий уровень покрытия тестами
Код без ошибок
Простой рефакторинг кода
Это позволяет разработчикам писать небольшие тестовые коды, которые легко отлаживать.
Зачем использовать разработку через тестирование (TDD) для ReactJS?
Если вы работали с ReactJS, то, вероятно, знаете, что код в ReactJS растет очень быстро. Код заполняется множеством сложных условий, вызванных вызовами службы и изменением состояния.
Каждый компонент вашего приложения React, в котором отсутствуют модульные тесты, становится устаревшим кодом, который очень сложно поддерживать. Хотя мы можем добавить модульное тестирование после того, как создадим производственный код, это будет очень рискованно, поскольку некоторые сценарии могут быть упущены из виду, что вызовет проблему на этапе производства.
Настройка среды для разработки через тестирование (TDD)
В первую очередь необходимо настроить среду для написания и запуска наших тестов.
Нам нужны среды тестирования, такие как Jest и Enzyme, для реализации наших тестовых кодов.
Настройка среды для TDD
В этом руководстве мы используем следующие версии:
Модульное тестирование с помощью Jest
Jest – это среда тестирования с открытым исходным кодом, созданная Facebook. Jest предлагает наилучшую интеграцию с ReactJS, включая инструмент командной строки для выполнения тестов.
Jest предлагает набор сопоставителей, которые упрощают чтение утверждений и позволяют нам создавать фиктивные функции с нулевой конфигурацией.
Jest также предлагает «моментальное тестирование» для проверки результата рендеринга компонента.
Для модульного тестирования с помощью Jest сначала установите Jest, используя следующую команду:
После установки Jest добавьте в файл package.json следующие строки:
Модульное тестирование с помощью Enzyme
Enzyme – это также среда тестирования с открытым исходным кодом, поддерживаемая Airbnb. В Enzyme проще утверждать, манипулировать и перемещать компоненты React.
Вы можете использовать любую из сред тестирования, но, как правило, лучше использовать Jest, поскольку он предлагает все необходимые инструменты для модульного тестирования и используется Facebook во всех своих кодах javascript.
Для модульного тестирования с помощью Enzyme сначала установите Enzyme, используя следующую команду:
Enzyme API
Чтобы отображать компоненты реакции и извлекать определенные узлы, вам нужно сосредоточиться на Enzyme API. Существует три способа рендеринга компонента реакции:
Поверхностный рендеринг
Поверхностный рендеринг используется для того, чтобы ваши тесты не утверждали поведение дочерних компонентов, а также полезен для ограничения себя от тестирования компонента как единицы.
Импорт
Полная визуализация
Полная визуализация или Полная визуализация DOM лучше всего подходят для случаев использования, требующих взаимодействия между компонентами и API DOM. Полная визуализация также полезна в тех случаях, когда тестовые компоненты заключены в компоненты более высокого порядка.
Для полного рендеринга требуется, чтобы полный API DOM был доступен в глобальном масштабе. Поэтому вам нужна среда браузера для запуска полного рендеринга DOM.
Если вы не хотите запускать тест в браузере, вы можете использовать библиотеку jsdom, которая представляет собой автономный браузер, реализованный на JavaScript.
Как и при полном рендеринге, компоненты фактически монтируются в DOM, что означает, что они могут влиять друг на друга (если они используют один и тот же DOM).
Импортировать
Статический рендеринг
Статический рендеринг использует функцию рендеринга для создания HTML из дерева React.
Функция рендеринга возвращает аналогичный результат по сравнению с другими методами рендеринга Enzyme, такими как мелкое и монтирование, но она использует стороннюю библиотеку Cheerio для синтаксического анализа и обхода HTML.
Импорт
Создание компонента React.js с помощью TDD
Самый первый шаг — создать неудачный тест, который попытается отобразить компонент ReactJS, используя поверхностный рендеринг.
