Чтобы начать тестирование с Jest в ваших приложениях React, вам сначала нужно установить Jest как зависимость разработчика, используя npm
:
$ npm install --save-dev jest
Или с yarn
:
$ yarn add --dev jest
Если вы используете create-react-app
для создания приложений React, он поставляется с Jest! Это означает, что нет никаких дополнительных действий по использованию Jest в ваших приложениях. Просто запустите исходное приложение с помощью create-react-app
и начните тестирование.
Без create-react-app
вы хотите использовать следующую команду для установки Jest и связанных с ним зависимостей:
npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer
Эта команда предполагает, что вы используете Babel.
Написание вашего первого теста
Прежде чем приступить к тестированию компонентов React, давайте начнем с написания простого теста Jest.
Мы напишем две гипотетические функции для этого примера. Первая функция будет типичной функцией «Hello World», к которой мы все привыкли. Второй будет математическим функционалом.
Сначала создайте файл hello-world.js
и вставьте в него:
В отдельном hello-world.test.js
файле мы напишем тест Jest:
Как видите, функция test()
принимает два аргумента. Первый аргумент - это строка, описывающая тестируемое поведение, а второй аргумент - это функция обратного вызова, которая фактически его проверяет.
Попробуем еще раз с другой функцией.
In multiply.js
:
Затем в multiply.test.js
:
И вот ваш основной тест.
Тестирование компонентов React
Сначала мы начнем с написания компонента React в Link.js
:
А теперь простой тест снимков с Jest в Link.test.js
:
Есть несколько способов использовать Jest для тестирования компонентов. Среда тестирования Jest имеет возможность создания моментальных снимков, которые при запуске тестов выводят файл моментального снимка. Однако я бы рекомендовал использовать Enzyme с Jest, поскольку у него отличный API для неглубокой визуализации. Вы также можете использовать Enzyme с Mocha.js и таким же образом протестировать React.
Пожалуйста, обрати внимание. Чтобы использовать Enzyme с Jest, вы должны установить свои зависимости разработчика с npm
или yarn
.
Приведенный выше тест ищет две вещи. Во-первых, я хочу проверить path
реквизита. Это гарантирует, что path
динамически передается в компонент, а не вводится вручную. Затем второй тест сравнивает html тестового компонента с тем, что мы ожидаем.
Вывод
Вот и все: простой тест Jest для компонентов React. Ознакомьтесь с Jest API здесь и Enzyme API здесь, чтобы увидеть все методы и функции, которые вы можете использовать для тестирования ваших компонентов React. До скорого. Ваше здоровье!