Ранее в этом году мы начали процесс использования React в нашем приложении AngularJS. К счастью, рендеринг компонентов React в Angular не так уж и сложен. Мы используем компонентный мост, основанный на подходе, разделяемом командой малых улучшений, который работает хорошо.
Побочным эффектом внедрения React в кодовую базу было то, насколько быстро Jest может запускать наши тесты. У нас была довольно сложная установка Angular с использованием Karma / Webpack / PhantomJS, сборка которой занимала несколько минут, прежде чем запускался какой-либо из тестов. Кроме того, теперь у нас было два набора отчетов о покрытии.
Jest использует модифицированную версию Jasmine в качестве средства запуска тестов. Поскольку мы использовали Jasmine для наших тестов Angular, требовалось только изменить некоторые файлы конфигурации, а не переписывать все наши тесты.
Карма Конфиг
Чтобы увидеть, с чего мы начали, вот как выглядел наш конфигурационный файл Karma. Ничего особенного, но для этого нужна была собственная конфигурация Webpack, которую мы должны были синхронизировать с другими нашими конфигурационными файлами Webpack.
Мы также управляли большим тестовым манифестом, который импортировал и запускал все наши тестовые файлы. С Jest все это ушло!
Конфигурация Jest
Из-за того, как определенные библиотеки Angular ожидают взаимодействия с Angular, мы используем загрузчики Webpack, чтобы сделать некоторые вещи доступными в глобальной области видимости. Но теперь, когда мы не используем Webpack для наших тестов, мы должны сделать это так, чтобы это работало для Jest.
Если раньше мы импортировали приложение и тестовый манифест, теперь мы предоставляем jQuery и Angular:
Мы используем полную библиотеку jQuery вместо jqLite Angular, поэтому нам нужно сначала открыть jQuery, чтобы Angular регистрировал его вместо этого при загрузке. Затем выставьте Angular для любых библиотек, которые в нем нуждаются. Наконец, импортируйте angular-mocks и файл записи приложения (index.js), чтобы Angular настроил приложение перед запуском тестов.
Упрощенная версия нашего индексного файла должна выглядеть примерно так, как ваша:
Затем обновите конфигурацию jest в package.json. Вот наша текущая настройка (на основе приложения create-response-app с некоторыми настройками):
Ключевым дополнением является следующее: "setupTestFrameworkScriptFile": "<rootDir>/index-specrunner.js" Это запускает Angular / jQuery, открывающий после загрузки тестовой среды. Почему-то не работает, если добавить в setupFiles. Я предполагаю, что это связано с необходимостью Jasmine и jsdom, доступных для разоблачения / mocks.
Вот и все! Нам пришлось внести некоторые изменения в наши тесты из-за того, как мы импортировали их в манифест, но большинство тестов выполнялись как есть. Горстка неудач была вызвана шпионами или другими специфическими для Jasmine вещами, которые отличаются от Jest, но опять же, небольшими хитростями.
Заключение
Потребовалось несколько попыток, чтобы придумать текущую конфигурацию и заставить все работать, но это того стоило.
Наши 800+ модульных тестов для React и Angular выполняются менее чем за минуту на нашем CI, что намного лучше, чем 2+ минуты, необходимые только для сборки Webpack.
Надеюсь, это поможет вам начать перенос собственных тестов AngularJS в более быструю и удобную в обслуживании среду тестирования!
Большое спасибо Матье Люкс из Зеницы за то, что он показал, что это возможно. В итоге наша установка немного отличалась, но это определенно было хорошим началом.
