8 вещей, которые делают Jest лучшей средой тестирования React

обзор

Jest — это открытая библиотека для тестирования JavaScript от Facebook. Его слоган — «Восхитительное тестирование JavaScript». Хотя Jest можно использовать для тестирования любой библиотеки JavaScript, он великолепен, когда речь идет о React и React Native.

Это не удивительно, так как и React, и Jest взяты из Facebook, который является основным пользователем обоих. В этом уроке я покажу вам восемь различных аспектов Jest, которые делают его восхитительным для тестирования приложений React.

1. Jest — это легкий настрой

Jest довольно прост в установке. Вы можете просто установить его в пустой, используя npm или пряжу. Я предпочитаю пряжу. Посмотрите 6 вещей, которые делают Yarn лучшим менеджером пакетов JavaScript, чтобы понять почему. Это так просто, как:

yarn add --dev jest

Если вы предпочитаете npm, введите:

npm install --save-dev jest

Прежде чем мы сможем протестировать, давайте напишем некоторый код для тестирования. Вот palindrome.js:

Вот шутливый тест в файле с именем palindrome.test.js:

Чтобы запустить тесты, добавьте это в package.json:

Теперь вы можете запустить тесты с помощью yarn test или npm test :

Это довольно просто. Но если вы используете реагирующее создание-приложения для создания своего проекта React, вам даже не нужно это делать. В комплект входит пакет jest, и вы можете сразу же начать писать тесты.

2. Шут молниеносно

Шут быстро. Очень быстро. Когда ваши тесты связаны с процессором, это может сократить время выполнения тестов. Airbnb переключился с Mocha на Jest, и их общее время выполнения теста сократилось с более чем 12 минут до всего лишь 4,5 минут на мощной машине CI с 32 ядрами. Локальные тесты занимали 45 минут, которые упали до 14,5 минут.

Что делает Jest таким быстрым? Это сочетание нескольких факторов:

• Распараллеливание: это довольно очевидно, и другие тестовые среды также используют его.
• Сначала запустите медленные тесты: это гарантирует, что все ядра используются максимально.
• Кэширование вавилонских преобразований: уменьшает интенсивное использование процессора вавилонских преобразований

3. Jest — это универсальный магазин

Jest поставляется со встроенными спичками, шпионами и собственной обширной библиотекой насмешек. Раньше он был основан на Жасмин, поэтому он унаследовал всю доброту Жасмин. Но в более поздних версиях Jest отошел от Jasmine, но сохранил ту же функциональность и добавил свой собственный вкус и улучшения.

Сравнивая его с индивидуальным решением для тестирования на основе Mocha, становится ясно, что простота использования — главная проблема дизайна Jest.

4. Шут имеет удивительные издевательства

Насмешка — невероятно важная часть юнит-тестирования. Это особенно важно, если вы заботитесь о быстрых тестах (а кто нет?).

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

Простые фиктивные функции

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

В этих случаях лучше заменить реальную зависимость фиктивной функцией, которая ничего не делает, а просто записывает факт вызова, поэтому вы можете проверить рабочий процесс. jest.fn() функция jest.fn() позволяет вам jest.fn() возвращаемые значения (для нескольких последовательных вызовов) и записывает, сколько раз он был вызван и какие параметры были в каждом вызове.

Ручные модули Mocks

Иногда вам может понадобиться заменить целый модуль с его данными, а не пару функций. Jest позволяет вам сделать это, поместив свой собственный модуль с тем же именем в __mocks__ .

Всякий раз, когда ваш код использует целевой модуль, он будет обращаться к вашему макету, а не к реальному модулю. Вы можете даже выборочно выбрать для некоторых тестов использование исходного модуля, вызвав jest.Unmock('moduleName') .

Таймер издевается

Время является проклятием юнит-тестов. Что если вы хотите протестировать код, который истекает через минуту? Код, который срабатывает каждые 30 секунд? Специальный код, который запускает алгоритм сверки в конце месяца?

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

• SetTimeout ()
• setInterval ()
• clearTimeout ()
• clearInterval ()

ES6 Class Mocks

Jest полностью поддерживает классы ES6 и предоставляет различные способы их использования:

• Автоматический макет: позволяет вам следить за вызовами конструктора и всех методов, но всегда возвращает неопределенное значение.
• Ручной макет: создайте свой собственный макет в __mocks__ .
• Дразнить фабрику классов с помощью функции высшего порядка.
• Выборочное mockImplementation() с использованием mockImplementation() или mockImplementationOnce() .

5. Jest поддерживает TypeScript

TypeScript — это популярный типизированный расширенный набор JavaScript, который компилируется в простой JavaScript. Jest поддерживает TypeScript через пакет ts-jest . Он описывает себя как препроцессор TypeScript с поддержкой исходной карты для Jest и имеет очень активное сообщество.

6. Шутка покрыла тебя

Jest имеет встроенные отчеты о освещении. Ваши тесты так же хороши, как и их охват. Если вы тестируете только 80% своего кода, ошибки в остальных 20% будут обнаружены только в рабочей среде.

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

Вот как создать отчет о покрытии для простого примера палиндрома:

7. Шутка делает снимки

Тестирование снимков великолепно. Это позволяет вам захватить строку, которая представляет ваш визуализированный компонент и сохранить его в файле. Затем вы можете сравнить его позже, чтобы убедиться, что пользовательский интерфейс не изменился. Хотя он идеально подходит для приложений React и React Native, вы можете использовать снимки для сравнения сериализованных значений других платформ. Если вы на самом деле изменили свой пользовательский интерфейс, то вам необходимо обновить файлы снимков, чтобы они отражали это.

8. Шутит ли дельта-тестирование часами

Jest может работать в режиме просмотра, где он запускает тесты автоматически, когда вы меняете код. Вы запускаете его с --watchAll командной строки --watchAll , и он будет следить за изменениями в вашем приложении. Я запустил jest в режиме просмотра и специально ввел ошибку в palindrome.js, и вот результат:

Вывод

Jest — это быстрая среда тестирования, которую легко настроить. Он активно разрабатывается и используется Facebook для тестирования всех своих приложений React, а также многими другими разработчиками и компаниями.

Он содержит все необходимое в одном удобном пакете, поддерживает TypeScript, и IMO — лучший вариант для тестирования приложений React и React Native. Это также очень для перехода от других решений для тестирования.

Помните, популярность React возросла. Фактически, у нас есть ряд товаров на рынке Envato, которые можно приобрести, просмотреть, внедрить и так далее. Если вы ищете дополнительные ресурсы по React, не стесняйтесь проверить их .