Jest и Enzyme - это круто! Модульное тестирование Frontend для приложения React!
Это инструменты внешнего тестирования, которые позволяют вам тестировать и утверждать элементы DOM, имитировать действия пользователя в модульном тестировании, что, как я когда-то думал, может быть выполнено только при сквозном тестировании с использованием Selenium! Jest / Enzyme и Selenium, безусловно, могут дополнять друг друга, обеспечивая надежное и эффективное автоматическое тестирование внешнего интерфейса!
Что такое шутка? Фермент?
Jest - это универсальный фреймворк для модульного тестирования, который предоставляет средства запуска тестов, библиотеку утверждений, шпионов, имитацию и покрытие. Довольно комплексная универсальная среда тестирования, которая в некотором роде эквивалентна Mocha (средство запуска тестов) + Chai (библиотека утверждений) + Sinon (шпионы, имитаторы) + Istanbul (покрытие).
Разработанный Facebook, Jest хорошо работает с приложением React, хотя он также работает и с другими приложениями. Я лично пробовал тестирование снимков только в приложении React, поэтому будет интересно узнать, как тестирование снимков работает в приложениях из других технических стеков.
Enzyme - это утилита для тестирования приложений React, разработанная Airbnb. Он предоставляет оболочки API, которые упрощают утверждение, управление и просмотр DOM ваших компонентов React. Enzyme может работать с любым фреймворком для тестирования, например Jest или Mocha.
3 типа рендеринга
И Jest, и Enzyme предоставляют API для рендеринга компонентов React. Есть 3 различных типа рендеринга: неглубокий, монтированный и рендер.
Неглубоко. Отображает только текущий компонент. Это полезно для изоляции тестирования от текущего компонента, а не для тестирования / утверждения дочернего компонента, вложенного в него.
Mount. Отображает полный компонент в JSDom (автономном браузере) и полезен, когда для полного тестирования компонента требуется полный жизненный цикл.
Рендеринг: преобразует компонент в полный HTML. Тестирование моментальных снимков по умолчанию преобразуется в статический HTML.
Для всех трех типов рендеринга все утилиты, зависящие от компонента, должны быть имитированы, даже при поверхностном рендеринге.
Тестирование снимков
Я обнаружил, что тестирование снимков - самая привлекательная функция Jest. Это позволяет вам сохранить снимок HTML DOM компонента React при первом запуске. Все последующие тестовые прогоны будут сравнивать последующие снимки с этим первым снимком, чтобы определить, были ли какие-либо изменения DOM (UI) в компоненте.
Одним из самых сложных моментов в начале работы является насмешка в шутку. Как издеваться над зависимыми утилитами?
Сценарий 1. Компонент, который зависит от SettingsUtil для выполнения вызовов Ajax GET / POST.
Сценарий 2: компонент, содержащий дочерние элементы, импортированные из сторонней библиотеки React-bootstrap-table.
Jest.mock можно использовать в обоих сценариях. Обратите внимание, что имитируемые утилиты должны появиться перед импортом компонента (Selfreflection) !! Он возвращает либо функцию, либо объект, который будет использован при рендеринге Selfreflection.
Осторожно..
Я учусь на собственном примере. Я люблю изучать технологии и инструменты с хорошей документацией, ресурсами и МНОЖЕСТВОМ примеров. В сети есть много примеров тестирования снимков состояния «Hello World», но не так много исчерпывающих, подробных примеров, которые научат вас, как тестировать / имитировать типичные приложения, которые мы создаем. Документация Jest объясняет основы, но может быть улучшена ...
Обновление моментальных снимков с помощью jest -u или npm test — -u (если вы установите npm test на jest). Он обновляет ВСЕ моментальные снимки! По состоянию на 10 марта 2017 г. обновление отдельных моментальных снимков не производится. Будьте осторожны при обновлении моментальных снимков, поскольку это может дать ложные срабатывания, если окажется, что компонент неисправен. когда вы хотели обновить снимок для другого компонента.
При запуске jest —- watch изменение компонента также приведет к автоматическому обновлению файла моментального снимка.
Тестирование моментальных снимков и Enzyme нельзя использовать в одном наборе тестов. Они должны быть расположены в разных файлах.
Кроме того, дизайн внешнего интерфейса может меняться чаще, чем вы ожидали, на протяжении всего проекта. Лучше оценить, стоит ли это делать или какая часть логики должна быть протестирована с приоритетом на текущей фазе проекта.
Некоторые примеры издевательства над локальным хранилищем, шпионажа:
https://github.com/EngineerFocus/FocusPro/tree/master/client/src/__test_
Несколько полезных ссылок для начала работы с Jest and Enzyme:
Устранение неполадок (имитация)
Https://github.com/facebook/jest/issues/936
http://stackoverflow.com/questions/39633919/cannot-mock-a-module-with-jest-and-test- вызовы функций
https://gist.github.com/evansiroky/89deb7759ae487abb5fed6d1dfdfce84
