Ускорьте Jest-тесты, используя правильную среду

ДОМ стоит дорого. Используйте его только тогда, когда вам это нужно.

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

Мы решили провести расследование и посмотреть, сможем ли мы ускорить процесс.

Проблема

На момент написания этой статьи в нашем UI-приложении было около 1600 модульных тестов. Мы используем Jest, TypeScript и React Testing Library. Около половины наших тестов предназначены для компонентов React, которым нужна DOM. Другая половина — это чистые функции или классы TypeScript. Им не нужен DOM для тестирования, только среда узла.

Jest работает через CLI с использованием Node. Такие вещи, как window, document и тому подобное, не существуют в Node. Итак, мы должны предоставить поддельный DOM для Node. Как вы можете себе представить, тесты, которым нужна DOM, имеют дополнительную зависимость от какой-то библиотеки DOM.

Документация Jest по тестированию Jest называет jsdom рекомендуемым инструментом для этой работы. Вы можете настроить среду Jest двумя способами; глобально через конфигурацию Jest или с помощью специального блока документации в отдельных тестовых файлах.

Я должен упомянуть, что в нашей конфигурации глобальная среда по умолчанию была установлена как jsdom.

Решение

Есть предположения, как мы улучшили ситуацию? Я уже намекал. Я дам вам минуту подумать об этом.

На высоком уровне нашим решением было установить среду Jest по умолчанию на node. Затем в тестах, которым требовался DOM, мы добавили docblock, чтобы указать Jest использовать среду jsdom вместо node.

Я хотел бы признать, что мы не просто разобрались с этим самостоятельно. Как любой хороший инженер, мы сначала нашли ответ в Интернете.

Как заставить ваши вялые тесты Jest v23 работать быстрее
Снова сделать модульные тесты отличнымиitnext.io

Чтобы заставить это исправление работать в нашем проекте, мы сделали это в три простых шага:

Установить `node` в качестве тестовой среды по умолчанию

Это сразу положительно сказалось на скорости. Но это также привело к провалу половины наших тестов. Мы ожидали этого, потому что у узла нет DOM. Таким образом, все тесты, которые нуждались в DOM, теперь были немного сварливыми.

Добавьте блок документов jsdom в тестовые файлы компонентов

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

/**
 * @jest-environment jsdom
 */

Затем мы повторно запускаем тесты и проверяем, все ли снова проходит. Легко!

Обновите генераторы компонентов, чтобы включить jsdom Docblock

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

За прошедшие годы Роберт С. (codeBelt) собрал здоровую коллекцию генераторов, которые мы используем в нашем проекте. Эти генераторы упрощают создание новых файлов в нашем проекте.

Заключение

Насколько сильно это повлияло на самом деле? Наши тесты теперь работают быстрее. Это имеет смысл, учитывая, что мы раскручиваем DOM только тогда, когда нам это нужно (примерно в половине случаев).

После того, как мы внесли это изменение, мы сократили пробежку со 120 секунд до 80 секунд. Не массовое изменение, но то, что действительно имело значение.