Набор инструментов для тестирования с открытым исходным кодом, который работает в большинстве проектов JavaScript.

Сегодняшняя тема - Jest, среда тестирования JavaScript, которая пригодится для тестирования ваших проектов JavaScript. На момент написания этой статьи он имел отличную поддержку Babel, TypeScript, Node, React, Angular, Vue и многих других.

Согласно официальной документации, он предоставляет следующие функции:

  • быстро и безопасно
  • покрытие кода
  • легкое издевательство
  • большие исключения

Jest - отличный набор инструментов для тестирования для разработчиков, которые ищут другие альтернативы и имеют опыт работы со следующими средами тестирования:

  • AVA
  • Expect.js
  • Жасмин
  • Мокко
  • прокси
  • Should.js
  • Лента

Переходим к следующему разделу и приступаем к установке Jest.

Настраивать

Установка довольно проста через yarn или npm, в зависимости от ваших предпочтений.

пряжа

Установите Jest via yarn следующим образом:

yarn add --dev jest

npm

В качестве альтернативы вы также можете использовать npm для установки Jest.

npm install --save-dev jest

Файлы JavaScript

Давайте создадим два новых файла JavaScript как часть теста:

  • algebra.js
  • algebra.test.js

Файлы, заканчивающиеся на .test.js, будут частью наборов тестов в Jest. Вы можете просто создать больше тестовых файлов, и Jest автоматически включит их в тест.

Конфигурация

Если вы начинаете заново в новой папке, выполните следующую команду, чтобы создать новый package.json файл.

npm init

Затем измените или включите следующее в package.json

{
  "scripts": {
    "test": "jest"
  }
}

Ваш окончательный package.json должен быть следующим:

Основное использование

В этом разделе мы собираемся реализовать две функции внутри algebra.js и настроить соответствующий тестовый скрипт.

Откройте algebra.js и добавьте в него следующий код. В конце файла вызывается exports для экспорта функций. Позже мы вызовем их внутрь algebra.test.js.

Создайте тестовый скрипт

Затем перейдите к algebra.test.js и добавьте следующий код для импорта функций, которые мы определили ранее.

const {sum, subtract} = require('./algebra');

Просто вызовите встроенную функцию test следующим образом:

test('addition', () => {
  expect(sum(1, 2)).toBe(3);
});

Утверждение определяется путем помещения любых функций внутрь функции expect, за которыми следуют любые предопределенные сопоставители. В этом случае мы использовали toBe в качестве сопоставителя, что означает, что Jest ожидает, что возвращенный результат будет 3.

toBe представляет собой точное равенство, поскольку использует Object.is внутри. Вместо этого вы должны использовать toEqual, если вы просто хотите проверить значение объекта. toEqual будет рекурсивно проверять все поля объекта.

Кроме того, вы можете отменить тест или проверить противоположность значения, используя not. Например,

test('addition', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(2, 2)).not.toBe(3);
});

Запустить тест

Когда вы будете удовлетворены своим тестовым скриптом, вернитесь к своему терминалу и запустите либо

yarn test

or

npm run test

Вы должны увидеть в своем терминале следующий результат.

Наборы тестов представляют собой количество протестированных файлов (заканчивается на test.js). Между тем, Tests представляет собой общее количество проведенных тестов. Давайте добавим новый тест внутрь algebra.test.js.

test('subtraction', () => {
  expect(subtract(1, 2)).toBe(-1);
});

При запуске теста отобразится следующий результат:

Сравнить числа

Обратите внимание, что toBe и toEqual одинаковы для чисел. Вы можете использовать их как взаимозаменяемые. Кроме того, вы можете легко сравнивать числа в своих тестах, используя следующие сопоставители:

  • toBeGreaterThan
  • toBeGreaterThanOrEqual
  • toBeLessThan
  • toBeLessThanOrEqual

Давайте посмотрим на следующий пример, в котором используется цикл, и проверим, меньше ли окончательное значение 20.

test('loop less than', () => {
  for (let i = 1; i < 10; i++) {
    expect(i + i).toBeLessThan(20);
  }
});

Давайте изменим значение с 20 на 15. При запуске теста вы должны получить следующий журнал ошибок.

Он указывает, что утверждение не удалось в строке 14 при вызове toBeLessThan. Ожидается, что возвращаемое значение будет меньше 15, но вместо этого получено 16. Как видите, это чрезвычайно полезно и легко для выявления проблем, связанных с недопустимыми тестовыми примерами.

Плавающая запятая

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

test('compare floating number', () => {
  let value = 0.1 + 0.2;
  expect(value).toBeCloseTo(0.3);
});

Сравнить строки

Регулярное выражение

Jest поддерживает сравнение строк с помощью регулярного выражения. Все, что вам нужно сделать, это вызвать функцию toMatch и передать строку регулярного выражения. Вот пример, чтобы проверить, присутствует ли строка medium в строке welcome to medium.

const text = 'welcome to medium'
test('string comparison', () => {
  expect(text).toMatch(/medium/);
});

Вместо строковой записи регулярного выражения можно использовать объект RegExp.

expect(text).toMatch(new RegExp('medium'));

Длина

С другой стороны, вы также можете сравнить длину двух строк с помощью toHaveLength.

expect('abc').toHaveLength(3);

Это также будет работать для массива.

expect([1, 2, 3]).toHaveLength(3);

Сравнить массивы

Если вы собираетесь проверить, присутствует ли конкретный элемент в массиве, вы должны использовать toContain. В следующем примере показано, как можно проверить, присутствует ли apple в массиве fruits.

const fruits = ['apple', 'orange', 'papaya', 'banana', 'peach'];
test('check list', () => {
  expect(fruits).toContain('apple');
});

Асинхронный код

Есть несколько способов обработки асинхронного кода, в зависимости от ваших потребностей.

Перезвоните

Самый простой способ обработать обратный вызов - использовать один аргумент done при вызове функции обратного вызова. Например,

Обещать

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

test('test promise', () => {
  return getData().then(data => {
    expect(data).toBe('wfng');
  });
});

Асинхронный / ожидание

С другой стороны, использование async / await намного проще. Давайте повторно воспользуемся предыдущим примером и изменим его, чтобы вместо него использовать async / await.

test('test async', async () => {
  const data = await getData();
  expect(data).toBe('wfng');
});

Пример

Обратите внимание, что вы можете смешивать их и использовать в своем тестовом сценарии по своему усмотрению. Давайте попробуем реализовать один простой пример, используя Promise. Создайте два новых файла JavaScript:

  • data.js
  • data.test.js

В data.js добавьте в него следующий код, чтобы создать универсальную функцию getData, которая извлекает данные из URL-адреса.

Затем откройте data.test.js и создайте в нем следующую тестовую функцию.

test('example promise', () => {
  return getData('https://httpbin.org/get?name=wfng').then(data => {
    expect(data.args.name).toBe('wfng');
  });
});

Он вызовет URL-адрес httpbin, и вы должны получить от него следующий responseText.

{
  "args": {
    "name": "wfng"
  }, 
  "headers": {
    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8", 
    "Accept-Encoding": "gzip, deflate, br", 
    "Accept-Language": "en-US,en;q=0.5", 
    "Dnt": "1", 
    "Host": "httpbin.org", 
    "Upgrade-Insecure-Requests": "1", 
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0", 
    "X-Amzn-Trace-Id": "Root=1-5fe85ce9-7d0b2686509d0aaf2cd7043a"
  }, 
  "origin": "180.129.116.68", 
  "url": "https://httpbin.org/get?name=wfng"
}

Наш тестовый пример - сравнить вывод args.name следующим образом:

expect(data.args.name).toBe('wfng');

Сохраните файл и повторно запустите тест. Jest проверит и algebra.test.js, и data.test.js.

Заключение

Подведем итоги тому, что мы узнали сегодня.

Мы начали с краткого объяснения фундаментальных концепций Jest. Также мы установили необходимый модуль через yarn или npm.

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

Мы также научились обрабатывать асинхронный код и реализовали простой пример с использованием обещания.

Наконец, мы изучили, как интегрировать Jest с Selenium и Perfecto Smart Reporting. Это помогает упростить весь процесс тестирования наших проектов.

Спасибо, что прочитали эту статью. Надеюсь увидеть вас снова в следующей статье!

использованная литература

  1. Шутка - Начало работы
  2. Шутка - Использование сопоставителей
  3. Шутка - Тестирование асинхронного кода
  4. Perfecto - Jest Integration
  5. Github - пример Jest Perfecto