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

Это просто узел

Если вы находитесь здесь в контексте angular, как и я (я провел два года, работая с angular, а некоторое время назад перешел, чтобы реагировать), вы обнаружите, что лучшим доступным вариантом был Karma, что он хорош, но имеет некоторые недостатки, например, вам нужно было запустить браузер, что требует времени, и если вы использовали что-то вроде travis-ci, вам приходилось проделывать некоторые уловки, чтобы подделать экран, потому что некоторые браузеры не запускаются без него.

Не нужно иметь дело с веб-пакетом

Другой вариант не использовать Karma - это Mocha и jsdom, но вы должны внести изменения в свой файл webpack, добавить mocha-webpack и начать бороться со всевозможными странными проблемами, такими как у меня, имея 100 тестов, и внезапно, когда я переместил Перестали работать 40% заставили не рассматривать этот вариант.

Но в любом случае, если вы собирались использовать Karma, все равно потребуется прикоснуться к вашему файлу webpack и добавить karma-webpack в качестве плагина Karma.

Очевидно, что оба указанных выше варианта добавляют больше времени, так как вам нужно дождаться сборки веб-пакета. В Jest нет необходимости иметь дело с webpack, почему? потому что вы можете игнорировать требования, которые не являются частью ваших тестов (изображения, файлы без кода, стили и т. д.). Более того, если вы используете CSS-модули, вы можете добавить пакет, который поможет вам с тестированием снимков, о котором мы поговорим позже. Есть страница об этом, которую вы можете проверить.

Сроки

Давайте просто сравним, каким был мой проект, когда мои тесты выполнялись с Karma, и какими они были сейчас, когда я запускал их с Jest.

По тестам отличий не было, только смена бегуна:

Доказательство говорит само за себя, разница между двумя бегунами составляет 37.224 секунды.

Конфигурация

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

Карма:

Пакеты: karma, karma-chrome-launcher, karma-coverage, karma-mocha, karma-mocha-reporter, karma-sourcemaps-loader, karma-webpack.

Шутка:

Пакеты: jest, babel-jest, enzyme-to-json, identity-obj-proxy.

Последние два пакета предназначены для поддержки функций, которые недоступны в Karma или Mocha, поэтому мы можем рассчитывать или нет, модульные тесты будут работать нормально только с jest и babel-jest.

Я думаю, что этот момент неоднозначен, поскольку мне нравится подключаемый стиль Karma, но я не люблю тратить день только на настройку моей тестовой среды.

Убийственные точки шутки:

Вот некоторые из вещей, которые могут побудить вас выбрать это среди других доступных средств запуска тестов:

  • Возможность запускать только те тесты, которые являются значимыми в зависимости от внесенных вами изменений: это действительно полезно для precommit ловушки и не умирать, ожидая запуска всех тестов.
  • Почти все необходимые функции уже встроены: мне не нужно загружать другой исполняемый файл, например mocha-webpack, чтобы делать то, что уже должно быть, или, по крайней мере, настраивать, в основном потому, что если я зависит от двух плагинов, и оба входят в исполняемые файлы , я не смогу связать их.
  • Моментальное тестирование: это действительно полезная функция, позволяющая убедиться, что изменения в ваших компонентах уже сделаны вами, и избежать регрессий. Подробнее об этом вы можете прочитать здесь.
  • Сильные конфигурации: он не только включает в себя основные вещи, которые требуются для запуска тестов, но также имеет гораздо более приятные вещи, такие как возможность настраивать пороги покрытия, модули automck, средства отображения модулей (полезно не импортировать. css или любые другие вещи, управляемые webpack), поддержка нескольких проектов в одном и том же средстве выполнения, настраиваемые преобразователи и преобразования (точно такие же, как webpack и babel) в другие.
  • Миграция без проблем: если вы хотите использовать синтаксис Jest и хотите переключить текущий проект, используйте codemods, которые программно перенесут текущий проект без каких-либо проблем с мэром и, как правило, без какого-либо взаимодействия с кодом. .
  • Это действительно быстро: не только запуск всего набора тестов, но и режим часов тоже быстрый.

Единственный момент, который был для меня недостатком мэра, но удивил меня в конце, это то, что мне не понравилась библиотека утверждений Jazmine, я уже использовал Chai и Sinon, и весь набор разработчиков, которых я знал, тоже использовал ее. . Но даже если библиотека утверждений уже включена, вы можете использовать ту, которая вам больше нравится, например: