Чтобы начать тестирование с 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. До скорого. Ваше здоровье!