Как настроить Jest для тестирования React?
Опубликовано: 2023-07-26По мере того, как все больше и больше разработчиков выбирают React в качестве своей клиентской среды, становится все более важным гарантировать, что код, который мы пишем, имеет высочайшее качество. Одним из важных аспектов обеспечения качества является тестирование, а Jest — это популярная среда тестирования, которая часто используется с React.
Jest — это среда тестирования с открытым исходным кодом, созданная Facebook, которая предназначена для максимально простого и эффективного тестирования вашего кода JavaScript. Он быстрый, имеет простой в использовании API и ряд встроенных функций, упрощающих тестирование.
В этой статье мы проведем вас через процесс настройки Jest для тестирования React. Мы рассмотрим все, что вам нужно знать, чтобы начать работу, от установки Jest до написания вашего первого тестового примера.
Jest для тестирования реакции
Jest — это популярная среда тестирования, используемая для тестирования приложений React. Он создан Facebook и известен своей простотой использования и быстрой настройкой. Jest разработан для работы с React «из коробки» и предоставляет множество функций, облегчающих тестирование.
Вот некоторые функции, которые делают Jest популярным выбором для тестирования приложений React:
i) Тестирование моментальных снимков: Jest предоставляет функцию тестирования моментальных снимков, которая позволяет сравнивать текущий вывод компонента с ранее сохраненным снимком. Это позволяет легко проверить, не были ли внесены какие-либо непреднамеренные изменения в вывод компонента.
ii) Насмешки: Jest предоставляет встроенные возможности насмешек, которые позволяют вам создавать фиктивные функции и модули. Это полезно, когда вам нужно смоделировать поведение функции или модуля, которые недоступны или их трудно протестировать.
iii) Покрытие кода: Jest предоставляет отчет о покрытии кода, который показывает процент кода, покрываемого вашими тестами. Это полезно для выявления областей вашего кода, которые не тестировались и могут потребовать дополнительного внимания.
iv) Асинхронное тестирование: Jest упрощает тестирование асинхронного кода, предоставляя утилиты для управления асинхронным кодом. Это позволяет вам писать тесты, которые ожидают разрешения промисов или другого асинхронного кода, прежде чем делать утверждения.
v) Простая настройка: Jest легко установить и настроить для вашего приложения React. Он поставляется с конфигурацией по умолчанию, которая работает «из коробки», но может быть настроена в соответствии с вашими конкретными потребностями.
В целом, Jest — это мощная и гибкая среда тестирования, которая упрощает тестирование приложений React. Его многочисленные функции и простая настройка делают его популярным выбором для разработчиков, которые хотят писать надежные тесты для своих компонентов React.
Настройка Jest для тестирования React
Есть определенные шаги, которые необходимо выполнить, чтобы настроить Jest для тестирования React в 2023 году.
1) Установите шутку
Jest можно установить в свой проект с помощью npm или yarn. Вот шаги по установке Jest с помощью npm:
i) Откройте терминал или командную строку и перейдите в каталог проекта.
ii) Запустите следующую команду, чтобы установить Jest в качестве зависимости разработки в вашем проекте:
npm install –save-dev шутка
Эта команда установит Jest и добавит его в файл package.json вашего проекта в разделе devDependencies.
После завершения установки вы можете начать писать тесты с помощью Jest. Вы можете запустить свои тесты с помощью команды npm test. По умолчанию Jest ищет тестовые файлы с расширением .test.js или .spec.js . Однако вы можете настроить Jest для поиска тестов с другими расширениями, изменив свойство testMatch в файле конфигурации Jest.
Вот и все! Теперь у вас установлен Jest в вашем проекте, и вы можете начать писать тесты для своего приложения.
2) Создайте файл конфигурации
Чтобы создать файл конфигурации для Jest, вы можете создать файл с именем jest.config.js в корневом каталоге вашего проекта. Этот файл будет содержать параметры конфигурации, которые Jest должен использовать при запуске тестов.
Вот пример файла конфигурации:
модуль.экспорт = {
// Указывает, какие типы файлов следует рассматривать как тестовые файлы.
тестматч: [
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
],
// Список путей к каталогам, которые Jest должен использовать для поиска файлов.
корни: ['<rootDir>/src'],
// Карта из регулярных выражений в пути к преобразователям.
трансформировать: {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
},
// Шаблоны глобусов, которые Jest использует для обнаружения тестовых файлов.
testPathIgnorePatterns: [
'<корневой_каталог>/node_modules/',
'<корневой_каталог>/сборка/'
],
// Список имен репортеров, которые Jest использует при написании отчетов о покрытии.
Репортеры покрытия: ['json', 'текст', 'html'],
// Массив расширений файлов, которые используют ваши модули.
moduleFileExtensions: ['js', 'json', 'jsx']
};
В этом примере файла конфигурации указаны следующие параметры:
а) testMatch: задает шаблон, используемый для идентификации тестовых файлов.
б) корни: указывает каталоги, в которых Jest должен искать файлы.
в) преобразование: определяет преобразования, которые Jest должен применить к файлам перед запуском тестов.
г) testPathIgnorePatterns: указывает шаблоны, которые следует игнорировать при поиске тестовых файлов.
e)coverageReporters: указывает репортеры, которые Jest должен использовать для создания отчетов о покрытии.
f) moduleFileExtensions: указывает расширения файлов, которые Jest должен искать при поиске файлов.
Вы можете изменить этот файл конфигурации в соответствии с потребностями вашего проекта. После того, как вы создали файл конфигурации, Jest будет автоматически использовать его при запуске тестов в вашем проекте.
3) Напишите свои тесты
После того, как вы установили Jest и настроили файл конфигурации, вы можете начать писать тесты для своего приложения React. Вот шаги для создания тестового файла и написания теста:
i) Создайте новый файл с расширением .test.js или .spec.js . Это будет ваш тестовый файл.
ii) В тестовом файле импортируйте компонент или функцию, которую вы хотите протестировать:
импортировать {сумму} из './myFunctions';
iii) Напишите свой тест. Тест — это функция, которая использует Jest API для проверки того, что компонент или функция ведет себя так, как ожидалось:
описать('сумма', () => {
test('добавляет 1 + 2, чтобы получить 3', () => {
ожидать(сумма(1, 2)).быть(3);
});
});
В этом примере мы тестируем простую функцию суммирования, которая складывает два числа. Функция описания группирует связанные тесты вместе, а функция тестирования задает один тестовый пример. Функция ожидания проверяет, возвращает ли функция суммы ожидаемое значение.
iv) Запустите свои тесты, выполнив команду npm test в каталоге вашего проекта. Jest будет искать тестовые файлы в вашем проекте и выполнять любые найденные тесты.
Вы можете добавить столько тестов, сколько вам нужно, чтобы охватить все функциональные возможности вашего компонента или функции. Jest предоставляет широкий спектр совпадений и других утилит, которые можно использовать для создания более сложных тестов.
Написав тесты для своего приложения React, вы можете убедиться, что ваш код работает должным образом, и избежать регрессий при внесении изменений в кодовую базу.
4) Запустите свои тесты
Чтобы запустить тесты с помощью Jest, вы можете использовать команду npm test в каталоге вашего проекта. Jest автоматически обнаружит и запустит любые тестовые файлы в вашем проекте, которые соответствуют шаблону, указанному в вашем файле конфигурации Jest.
Когда вы запускаете тест npm, Jest выводит результаты ваших тестов в консоль. Если все тесты пройдены, Jest отобразит сводку результатов тестов:
ПРОЙДИТЕ src/components/Example.test.js
✓ рендерит без сбоев (21 мс)
Наборы тестов: 1 пройдено, всего 1
Тесты: 1 пройдено, 1 всего
Снимки: всего 0
Время: 3,204 с, расчетное 4 с
Запустил все наборы тестов.
Если какие-либо тесты не пройдены, Jest отобразит сообщение об ошибке, в котором описывается сбой и местонахождение не пройденного теста:
ОШИБКА src/components/Example.test.js
- Пример компонента › отображается без сбоев
TypeError: Невозможно прочитать карту свойств неопределенного
10 | оказывать() {
11 | const {элементы} = this.props;
> 12 | вернуть items.map(item => <div key={item.id}>{item.name}</div>);
| ^
13 | }
14 | }
15 |
в Example.render (src/components/Example.js:12:17)
в ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)
в Object.<anonymous> (src/components/Example.test.js:9:16)
Наборы тестов: 1 неудачно, всего 1
Тесты: 1 неудачный, 1 всего
Снимки: всего 0
Время: 3,537 с, расчетное 4 с
Запустил все наборы тестов.
Jest также предоставляет ряд параметров, которые вы можете использовать для настройки поведения ваших тестов, таких как запуск тестов в режиме наблюдения, создание отчетов о покрытии кода и многое другое. Вы можете найти больше информации об этих параметрах в документации Jest.
Подведение итогов
LambdaTest — это мощная облачная платформа для тестирования, которую можно использовать вместе с Jest для тестирования приложений React. Используя масштабируемость облачной инфраструктуры LambdaTest, вы можете быстро и эффективно запускать тесты Jest в широком диапазоне браузеров и устройств, гарантируя, что ваше приложение будет работать должным образом в различных средах.
В этом блоге мы рассмотрели шаги, необходимые для настройки Jest для тестирования приложений React. Мы также узнали, как настроить Jest для использования LambdaTest в качестве тестовой среды, написать тесты с помощью Jest и выполнить тесты в облачной инфраструктуре LambdaTest.
Совместное использование LambdaTest и Jest предоставляет разработчикам React надежное решение для тестирования, которое может помочь им выявлять регрессии и ошибки на ранних этапах цикла разработки, повышая общее качество их приложений.
Итак, если вы хотите оптимизировать рабочий процесс тестирования React, рассмотрите возможность совместного использования LambdaTest и Jest для комплексного, масштабируемого и эффективного тестирования приложений React.