Enzyme значительно упрощает тестирование ваших приложений на React

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

Что такое фермент?

Enzyme - это утилита для тестирования JavaScript для React. Он упрощает тестирование компонентов React, утверждая, манипулируя и просматривая выходные данные каждого компонента. В настоящее время его исходный код открыт и поддерживается Airbnb.

Почему энзим?

Что касается тестирования, вы, наверное, слышали о Mocha и Chai. Эта среда тестирования JavaScript и библиотека утверждений часто используются как единое целое для написания модульных и функциональных тестов.

Но как насчет тестирования компонентов React? Фермент - это решение по следующим причинам:

  • Интуитивно понятный и гибкий API
  • Совместимость с основными и распространенными тестовыми программами
  • Поддерживает неглубокий рендеринг, рендеринг DOM и разметку статического рендеринга.

Реализация ферментов

Теперь давайте узнаем, как мы можем использовать Enzyme с Jest, средство запуска тестов в React, для написания тестов.

Шаг 1. Установите Enzyme

Сначала устанавливаем пакет:

npm install enzyme enzyme-adapter-react-16

Шаг 2: setupTests.js

Когда вы создаете новое приложение React, по умолчанию должен быть инициализирован setupTests.js файл.

Добавьте в этот файл следующий код для импорта Enzyme:

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

Шаг 3. App.test.js

В этом примере давайте протестируем наш App.js файл. Jest, наш инструмент для выполнения тестов, автоматически запускает тестовые файлы, если это:

  1. Любой файл .js в папке с именем tests.
  2. Любой файл .js с именем типа [name].spec.js.
  3. Любой файл .js с именем типа [name].test.js.

Итак, давайте возьмем App.test.js файл для проверки нашего App.js. В этом файле мы напишем такой простой тест:

В нашем первом тесте мы используем неглубокий рендеринг, чтобы изолировать отдельный компонент, такой как <App/>, и убедиться, что он рендерится.

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

«Типичный тестовый пример моментального снимка визуализирует компонент пользовательского интерфейса, делает снимок, а затем сравнивает его с эталонным файлом моментального снимка, хранящимся вместе с тестом».

Выполнить тесты

Давайте запустим эти два простых примера теста с:

npm test

Если все тесты пройдены, терминал должен показать:

Автоматизация ваших тестов

Итак, теперь мы знаем, как писать простые тесты пользовательского интерфейса с помощью Enzyme. Для более подробной информации посетите их документацию.

Всегда лучше автоматизировать тестирование, а не запускать npm test каждый раз вручную. Buddy CI / CD - это инструмент, который я использую для легкой автоматизации тестов, и он хорошо работает с приложениями React.

Шаг 1. Добавьте конвейер

Для начала просто создайте учетную запись на сайте buddy.works и добавьте свой проект, выбрав поставщика Git, который вы используете.

Затем добавьте конвейер, в котором мы можем автоматизировать наши тесты в нашем приложении React. Убедитесь, что для параметра «Режим триггера» установлено значение «По нажатию», а значение ветви - master, чтобы наш тест запускался автоматически каждый раз, когда мы вносим изменения в наш проект.

Шаг 2. Добавьте действие узла

Поскольку мы используем команду npm test для запуска нашего теста, мы можем добавить действие Node в наш конвейер.

В нашем действии мы запускаем команды для установки нашего пакета и запуска нашего теста:

Шаг 3. Добавьте уведомления

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

Запустите конвейер!

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

Заключение

Enzyme упрощает тестирование компонентов и пользовательского интерфейса для приложений React. Что касается написания тестов, их автоматизация может помочь обнаружить ошибки на раннем этапе и сэкономить время разработки.

Дополнительные ресурсы о том, как создавать конвейеры доставки для приложений React с помощью Buddy, можно найти в следующих материалах:

Спасибо за прочтение! Ваше здоровье!