Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Обзор

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

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

1. Jest легко настроить и запустить

Jest довольно прост в установке. Вы можете просто установить его в пустую директорию, используя npm или yarn. Я предпочитаю yarn. Посмотрите 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-create-app для создания своего проекта React, вам даже не нужно это делать. Пакет Jest поставляется в комплекте, и вы можете сразу же начать писать тесты.

2. Jest очень быстрый

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

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

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

3. Jest универсален

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

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

4. У Jest есть прекрасные моки

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

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

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

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

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

Моки модулей

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

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

Мок таймера

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

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

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

Моки ES6 классов

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

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

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

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

6. Jest покроет тебя

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

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

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

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

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

8. Jest для дельта-тестирования с watch

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

Заключение

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.