Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Jest JS: Автоматическое тестирование

Когда тестов и файлов с тестами становится много, возникают новые вопросы. Как группировать тесты? Как запустить на выполнение все тесты из одной директории? Если их очень много и они долгие, можно ли запустить их параллельно?

Для решения этих вопросов используют специальные тестовые фреймворки. Они помогают организовать структуру тестов и дают много полезного, например, удобный вывод. С большинством из этих возможностей мы познакомимся далее по курсу. В JavaScript-мире наиболее популярен фреймворк Jest, разрабатываемый компанией Facebook. К слову, с помощью него мы тестируем все практики на Хекслете.

Ниже находится инструкция, в которой мы создадим с нуля npm-проект и добавим в него тесты.

Настройка и запуск

Создайте где-нибудь на вашем компьютере директорию с названием hexlet-jest. Зайдите в неё и выполните команду:

npm init

Ответьте на все вопросы запущенного скрипта инициализации проекта. Убедитесь, что в корне проекта появился файл package.json.

Теперь добавим немного исходного кода. Создайте файл src/index.js с таким содержимым:

// Эта функция переворачивает переданную строку
export default str => str.split('').reverse().join('');

Jest — обычный npm-пакет, который локально подключается в разрабатываемый проект. Jest нужен только во время разработки, поэтому лучше установить его в секцию devDependencies:

# В директории с проектом
npm i --save-dev jest

Чтобы Jest корректно работал с системой модулей, добавьте в package.json следующую опцию:

  "type": "module"

Jest ожидает, что тесты находятся в директории __tests__, которую обычно располагают в корне проекта. Внутри этого каталога, можно создавать любую структуру, Jest найдёт все тесты, которые там лежат. Именование файлов с тестами должно быть таким: <name>.test.js. Где <name>, как правило, соответствует имени модуля, который тестируется.

Напишем наш первый тест. Создайте файл __tests__/index.test.js со следующим содержимым:

import reverse from '../src/index.js';

test('reverse', () => {
  expect(reverse('hello')).toEqual('olleh');
  expect(reverse('')).toEqual('');
});

Далее мы разберём структуру этого файла, а пока попробуем запустить тест на выполнение:

npx jest # или NODE_OPTIONS=--experimental-vm-modules npx jest
 PASS  __tests__/index.test.js
  ✓ reverse (11ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.166s
Ran all test suites.

https://repl.it/@hexlet/js-testing-jest-babel#__tests__/index.test.js

Ура! Тесты прошли успешно.

Структура

Давайте ещё раз посмотрим на файл с тестом:

import reverse from '../src/index.js';

test('reverse', () => {
  const str = 'hello';
  expect(reverse(str)).toEqual('olleh');
  expect(reverse('')).toEqual('');
})

Для тестов Jest предоставляет две глобальные функции: test и expect. Они доступны без какого-либо импорта, так как Jest делает их глобальными функциями.

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

npx jest
 PASS  __tests__/index.test.js
  ✓ reverse (11ms) # название теста

Второй параметр — функция, внутри которой описан проверочный код. Обратите внимание на то, что этот код не выполняется сразу. Функция test добавляет его внутрь Jest, который уже решает, как и когда запускать тесты. Это позволяет проводить различные оптимизации, например, выполнять тесты параллельно.

Самое необычное в этом коде — проверки. Jest использует "матчеры" (matchers). Это утверждения, имеющие особую структуру, напоминающую обращение к объекту. Общий принцип работы матчеров такой:

  • Вызывается функция expect(), куда передаётся актуальное (фактическое) значение.
  • На результате, возвращаемом функцией expect(), вызывается подходящий матчер, например, toEqual.

Код с матчерами похож на обычные предложения на английском языке. Это сделано специально, чтобы их могли читать даже не программисты:

// Ожидается, что результат выражения reverse('hello') равен 'olleh'
expect(reverse('hello')).toEqual('olleh');

Подробнее о матчерах в следующем уроке.

Одна из приятнейших особенностей Jest — то, как он выводит сообщения о проваленных проверках. Попробуйте внести ошибку в исходную функцию и запустите тесты заново:

 npx jest
 FAIL  __tests__/index.test.js
  ✕ reverse (9ms)

  ● reverse

    expect(received).toEqual(expected) // Object.is equality

    Expected: "olleh"
    Received: "o|l|l|e|h"

      3 | test('reverse', () => {
      4 |   const str = 'hello';
    > 5 |   expect(reverse(str)).toEqual('olleh');
        |                        ^
      6 | })
      7 |

      at Object.toEqual (__tests__/index.test.js:5:24)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.683s
Ran all test suites.

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


Самостоятельная работа

  1. Выполните все шаги из этого урока
  2. Залейте код на Гитхаб

Пример полностью настроенного пакета: https://github.com/hexlet-boilerplates/nodejs-package


Дополнительные материалы

  1. Jest
  2. Блоки тестов (Describe)
  3. Курс "JS: Настройка окружения"

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
29 сентября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
29 сентября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»