В этой статье используется React версии 17.0.1 с тестированием зависимостей от разработчиков, энзимом, jest-энзимом и адаптером энзима React 17 @ wojtekmaj / энзим-адаптер-реакт-17. Если вы используете разные версии React, возможно, вам придется использовать другой адаптер для Enzyme. В этой статье также предполагается, что вы используете приложение create-react-app, так как оно использует несколько заранее подготовленных сценариев npm.

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

Существует множество инструментов для тестирования, от Chai и Mocha до Selenium и Cypress. Для тестирования React я обычно использую Enzyme и Jest для модульного и интеграционного тестирования. Чтобы нацелить компоненты и элементы в нашу DOM, мы вставляем указатель атрибута data-test в целевой элемент. Это позволяет нам идентифицировать и изолировать узел для конкретных тестов узла.

Почему мы используем атрибуты data-test вместо классов или идентификаторов для наших указателей тестирования? Идентификаторы и классы чаще всего используются при стилизации с помощью CSS и функциональности с помощью Javascript, и поэтому с большей вероятностью будут редактироваться другими инженерами в вашей команде. Намного безопаснее использовать настраиваемый атрибут данных, в данном случае data-test, для создания указателей для наших элементов для тестирования из-за ясности их назначения. Поскольку они не связаны с функциональным или эстетическим кодом, они вряд ли будут изменены во время разработки.

Однако после того, как вы закончите тестирование в своей среде разработки, вы не захотите продвигать DOM в производственную среду, заваленную атрибутами тестирования данных. Любой, кто проверит ваш сайт, увидит загроможденную модель DOM, заполненную атрибутами, не имеющими производственной ценности. Из-за этого мы хотим удалить атрибуты data-test во время процесса сборки, чтобы наша окончательная модель DOM была чистой, а атрибуты data-test не содержали!

Я написал очень простое приложение Hello World React, которое отображает «Hello World» в элементе h1. В этом приложении выполняется единственный тест, который проверяет, был ли отрисован компонент для заголовка. Чтобы иметь возможность правильно идентифицировать элемент h1 для моего теста, я добавил атрибут data-test со значением «component-welcome» к h1 и использую тест утверждения expect и toBe при неглубокой визуализации моего компонента приложения. чтобы увидеть, правильно ли он отображается:

Но ждать! Когда я запускаю приложение на локальном сервере, атрибут data-test отображается в DOM:

Сейчас это может показаться проблемой, но что происходит, когда мы тестируем 5 элементов на каждом компоненте рендеринга из 30 компонентов? Все становится беспорядочно очень быстро. Чтобы бороться с этим, мы удалим атрибуты data-test, добавив и настроив пакет babel-plugin-react-remove-properties.

Первый шаг - добавить пакет babel-plugin-react-remove-properties в качестве зависимости разработчика, запустив команду «npm i –save-dev babel-plugin-react-remove-properties». Это добавит пакет в наш файл package.json, но не будет добавлен веб-пакетом в наш файл пакета разработки.

После установки этой зависимости мы запускаем «npm run eject», что позволит нам редактировать файлы конфигурации нашего проекта. Поскольку этот сценарий подвергнет наши файлы возможным вредоносным изменениям, мы, пользователи, должны будем создать фиксацию, прежде чем мы сможем запустить этот сценарий извлечения.

Сделав фиксацию, позволяющую нам отменить наши изменения, и запустив скрипт извлечения, мы готовы редактировать файл package.json. Этот файл содержит все наши зависимости, включая все наши файлы babel.

Мы хотим иметь возможность удалять определенные свойства из нашей DOM. Пакет babel-plugin-react-remove-properties позволяет нам это сделать. В документации npm (перечисленных в ресурсах внизу страницы) есть два блока кода, один с параметрами, а другой - без них. Мы скопируем код с параметрами и поместим его в нашу зависимость babel:

Я отредактировал значение свойств, чтобы включить только тест данных, так как это единственное, что я хочу удалить. После добавления этого кода в наш package.json и изменения его, чтобы сосредоточиться на data-test, мы готовы к следующему шагу - созданию нашей производственной сборки.

Из терминала запустите команду «npm run build», которая создаст рабочую версию нашего приложения React. После завершения сборки у нас будет возможность запустить ее на локальном сервере.

Если вы впервые запускаете производственную сборку, вам нужно будет запустить «npm i –g serve», который установит пакет serve глобально на вашем компьютере. Как только это будет завершено, запустите «serve –s build», который запустит локальный сервер. Мой находится на localhost: 5000. Когда я перехожу по этому адресу, я обнаруживаю, что мое приложение запущено, а атрибута data-test больше нет в моей DOM! Успех!

Теперь у вас есть модель DOM без атрибутов тестирования данных, которую вы можете безопасно создать и развернуть в любое время!

Ресурсы

Https://www.npmjs.com/package/babel-plugin-react-remove-properties

Https://github.com/wojtekmaj/enzyme-adapter-react-17

Https://www.udemy.com/course/react-testing-with-jest-and-enzyme/