11 инструментов и библиотек для тестирования React-компонентов

0
222
views

Перевод статьи «11 React Testing Tools and Libraries for 2019».

Большинство людей для тестирования своих компонентов пользуются Jest. Возможно, в сочетании с Enzyme и парой других утилит. Но, несмотря на то что Facebook рекомендует Jest в качестве своего любимого фреймворка тестирования React, open source экосистема богата фреймворками и инструментами для тестирования React-приложений.

Выбор правильного набора инструментов (от фреймворков тестирования до полезных библиотек утверждений) является ключом к максимально эффективному применению TDD в React. И это касается как модульного тестирования компонентов, так и интеграционного тестирования, и даже сквозного тестирования React-приложений.

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

1. Jest

Тестовый фреймворк Jest

Jest это тестовый фреймворк, используемый Facebook для тестирования компонентов React. Также его применяют в Uber, Airbnb и других командах. Таким образом, именно этот фреймворк рекомендует сообщество React. Jest «из коробки» работает со многими проектами JavaScript, от create-react-app до NG, Vue и даже TS или Babel.

Тестирование снимков UI и complete-API философия Jest прекрасно сочетаются с React. Также к плюсам можно отнести производительность, которая достигается благодаря параллельному тестированию на основе процессов и опциональному приоритету неудачных тестов.

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

2. Mocha

Тестовый фреймворк Mocha

Mocha это тестовый фреймворк JavaScript для программ на основе Node.js. В его арсенале – поддержка браузера, асинхронное тестирование, отчеты по покрытию тестами и возможность использования любых библиотек утверждений. Он очень настраиваемый и дает разработчику полный контроль над тем, как он хочет тестировать свой код, при помощи каких инструментов, при этом вы можете подключать и отключать большинство вспомогательных библиотек и инструментов в вашей цепочке.

Как и Jest, и другие фреймворки, Mocha при работе с React может комбинироваться с Enzyme, а также с Chai и другими библиотеками. Многие предпочитают использовать именно этот фреймворк для тестирования своих React-приложений, особенно когда нужны особые продвинутые настройки и одновременно хорошо разработанный и богатый инструментарий. Но в использовании Mocha есть и минусы, поскольку распространенные задачи (вроде снимков) требуют добавления дополнительных инструментов и дальнейшей настройки.

3. Chai

Chai

Chai это BDD / TDD библиотека утверждений и ожиданий для node и браузер, который может прекрасно сочетаться с любым тестовым фреймворком JavaScript. Эта библиотека часто применяется в тестировании в связке с Mocha и Enzyme, также может использоваться с Jest и Enzyme. Базовые интерфейсы Chai включают такой функционал как expect, should и assert, что помогает вам декларировать, чего ожидать в тесте. Если вы выбрали Mocha в качестве фреймворка тестирования, будет полезно испытать Chai.

4. Karma

Karma это не тестовый фреймворк

Karma это не тестовый фреймворк и не библиотека утверждений. Это инструмент для запуска тестов, работающий с Jasmine, Mocha и т. д. Он запускает HTTP-сервер и генерирует HTML-файл запуска теста. При помощи Karma можно выполнять JavaScript-код в нескольких реальных браузерах, запуская в них сгенерированный HTML-файл.

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

5. Jasmine

Тестовый фреймворк Jasmine

Jasmine позиционирует себя как «Тестовый фреймворк JavaScript для браузеров и node.js». Это тестовый фреймворк для BDD в JavaScript. Он не привязан к браузерам, DOM или какому-либо фреймворку JavaScript. Тем не менее, традиционно используется в таких фреймворках как Angular при помощи их инструментов командной строки.

Jasmine может использоваться для тестирования React-приложений, например, с Babel и Enzyme. Существует даже специальная вспомогательная библиотека утилит, созданная для сглаживания этого рабочего процесса. Задумались, стоит ли отдать предпочтение Jasmine, а не Jest? Вот отличная дискуссия по этому вопросу на Reddit.

6. Enzyme

Погружение в тестирование React это сложное дело, особенно с такими фреймворками тестирования как Jest и без привлечения Enzyme от AirbnbEng. Enzyme это не тестовый фреймворк, это скорее тестовая утилита для React, облегчающая тестирование вывода компонентов, абстрагируя их рендеринг.

Enzyme может помочь вам рендерить компоненты, находить элементы и взаимодействовать с ними. Попробуйте использовать Enzyme в паре с Jest или испытайте его с Karma, Mocha и т. д.

7. React-testing-library

Тем, кто не использует Enzyme (например, Facebook), команда React рекомендует применять react-testing-library для симуляции поведения пользователя в ваших тестах. Во многом подобно Enzyme, эта библиотека является простым и полным набором тестовых утилит React DOM, нацеленных на имитацию настоящих действий пользователя и рабочих процессов. Не можете выбрать между react-testing-library и Enzyme? Возможно, вам поможет эта статья.

8. Тестовые утилиты React и Test renderer

На самом деле это не библиотека, а скорее набор полезных утилит (таких как act(), mockComponent(), isElement и пр.) в React, которые помогают тестировать компоненты при использовании любого выбранного вами фреймворка. Test renderer позволяет вам рендерить компоненты React в чистые объекты JavaScript без зависимости от DOM.

Знание этих полезных инструментов это ключ к успешному тестированию ваших компонентов и приложений на React без необходимости заставлять внешние инструменты делать больше, чем нужно. При выборе подходящих для вас инструментов начать лучше отсюда.

9. Cypress IO

Cypress

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

Можно «путешествовать во времени» при помощи снимков, автоматически перезагружать изменения тестов, а также заниматься отладкой без лишних трудностей. Благодаря встроенному распараллеливанию и балансировке нагрузки отладочные тесты в CI также становятся намного проще. Однако вы не можете использовать Cypress для работы с двумя браузерами одновременно, а это может быть неудобством.

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

10. Pupeeter

Puppeteer

Puppeteer это библиотека Node, предоставляющая API для контроля Chrome поверх протокола DevTools. Puppeteer по умолчанию запускает Chrome или Chromium в режиме headless, но может быть настроен для полного запуска (non-headless).

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

Puppeteer часто используется с Jest (и Faker) для сквозного тестирования React-приложений, поскольку Puppeteer дает возможность делать скриншоты и многое другое.

11. Bit

Bit

Bit изолирует и инкапсулирует компоненты React, позволяя использовать их повторно в разных проектах и приложениях. Уникальная способность Bit виртуально изолировать компоненты из их проектов превращает его в мощный инструмент для TDD.

При помощи одной лишь CLI-команды Bit создаст виртуальное представление для каждого компонента в вашем проекте, инкапсулирует и упакует его со всеми его файлами, зависимостями и конфигурациями. Затем компоненты можно будет протестировать независимо друг от друга при помощи любого выбранного вами фреймворка.

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

В хабе каждый компонент пройдет независимую CI для проверки его пригодности для повторного использования. Для каждого компонента будут представлены изолированные результаты тестов. Поскольку Bit определяет и контролирует зависимости компонентов, вы даже можете изучить, какие изменения в компоненте могут повлиять на тесты зависимых от него компонентов.

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

Заключение

Модульность React ведет к улучшению TDD. Применение подходящего инструментария помогает безболезненно осуществить эту теорию на практике, наслаждаясь всеми ее преимуществами.

Сочетание подходящего тестового фреймворка (например, Jest) с правильными библиотеками утверждений (например, Enzyme) это ключ к созданию плавного и гибкого рабочего процесса, который сможет приспособиться к обновлению, расширению и изменению вашего кода. Виртуальная изоляция компонентов из их проектов (например, при помощи Bit) поднимает модульность и TDD на совершенно новый уровень.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here