Настройка Jest для работы с Laravel-Mix, Webpack, Babel

Делюсь своим опытом работы с Jest с Laravel-Mix, Webpack и Babel

Jest зарекомендовала себя как одна из ведущих библиотек для TDD (разработка через тестирование) для ReactJS; возможно, создание разработчиками в самом FB способствовало его делу.

Поэтому, когда я захотел изучить ReactJS (он был в моем списке TODO столько, сколько я сейчас помню), я, естественно, выбрал Jest в качестве предпочтительной библиотеки. Тем не менее, была загвоздка: я работал над приложением Laravel, поэтому мне пришлось заставить Jest работать с Webpack и Babel в приложении Laravel, большая часть того, что я документирую ниже, представляет собой шаги, сопоставленные с приложением ReactJS по умолчанию и вещами, которые я узнал о Babel. (фу!) в процессе.

Установка пакетов

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

Базовые пакеты, необходимые для тестирования ReactJS:

реагирует-тестирует-библиотеки

Поддержка библиотек для корректной работы Jest с laravel-mix

dev-зависимости-package.json

После этого вам нужно настроить Jest

шутка-config-package.json

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

энзим.js

jsdom.js

Мы также знаем, что Jest использует компилятор babel в разделе преобразования.

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