Набор инструментов для тестирования с открытым исходным кодом, который работает в большинстве проектов 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. Это помогает упростить весь процесс тестирования наших проектов.
Спасибо, что прочитали эту статью. Надеюсь увидеть вас снова в следующей статье!