Тестирование кода JavaScript с помощью Jest
Jest предлагает полное и простое в настройке решение для тестирования JavaScript и готово к работе для любого проекта React. Разве это не круто?
Почему шутка?
Facebook использует Jest для тестирования всего кода JavaScript, включая приложения React. Одна из философий Jest заключается в предоставлении интегрированного опыта с нулевой конфигурацией. В настоящее время Jest используют Facebook, Instagram, Twitter, PayPal, IBM и многие другие. В настоящее время Jest имеет более 11 000 звезд на GitHub.
Особенности:
* Jest распараллеливает выполнение тестов между рабочими процессами, чтобы максимизировать производительность.
* Jest легко создает отчеты о покрытии кода, используя - покрытие без дополнительных настроек или библиотек.
* Предоставляет мощную имитационную библиотеку для функций и модулей.
* Работает с TypeScript и легко интегрируется с babel .
Начиная
Jest можно использовать для тестирования любого приложения JavaScript. Для разработчиков React Jest уже настроен, когда вы используете create-react-app или react-native init для создания проектов React и React Native. Чтобы включить Jest, найдите ваши тестовые файлы в любом приложении JavaScript, сохраните тестовые файлы с расширением .spec.js или .test.js или поместите файлы тестов в __tests__ папку.
Установка
Сначала создайте папку, а затем создайте файл package.json, используя:
cd folder-name npm init
Установка должна выглядеть так:
Вы создали package.json файл, в котором будет храниться информация о проекте, а также зависимости.
Установим шутливую зависимость. Для НПМ:
npm install — save-dev jest
Для пряжи:
yarn add — dev jest
Убедитесь, что ваш package.json выглядит так:
{
“name”: “jest-tutorial”,
“version”: “1.0.0”,
“description”: “A Jest Tutorial”,
“main”: “index.js”,
“scripts”: {
“test”: “jest”
},
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/codediger/jest-tutorial.git"
},
“keywords”: [
“jest”,
“javascript”
],
“author”: “Orinami Olatunji”,
“license”: “ISC”,
“bugs”: {
“url”: “https://github.com/codediger/jest-tutorial/issues"
},
“homepage”: “https://github.com/codediger/jest-tutorial#readme",
“devDependencies”: {
“jest”: “²⁰.0.4”
}
}
Быстрый пример
Приведем небольшой пример. Создайте новый файл и назовите его concat.js. Добавьте этот код:
//concat.js
function concat(x, y) {
return x + y;
}
module.exports = concat;
Затем создайте файл с именем concat.test.js. Вот куда мы поместим наш тестовый код:
//concat.test.js
const concat = require(‘./concat’);
test(‘join Orin and ami to be Orinami’, () => {
expect(concat(‘Orin’, ‘ami’)).toBe(‘Orinami’);
});
Запустите тест, используя npm test. Вот что вы увидите:
Вы только что написали свой первый тест. Ура!
Введение в Jest expect API
expect дает вам доступ к ряду matchers, которые позволяют проверять разные вещи. При написании теста мы хотим убедиться, что результат соответствует ожиданиям. Jest expect API содержит множество методов, которые вы можете использовать в своем приложении. Мы не можем изучить все, но мы бы рассмотрели expect.assertions() и .toBe().
ожидать.assertions ()
Это очень полезно при тестировании асинхронного кода, чтобы гарантировать, что утверждения в обратном вызове были вызваны. expect.assertions() используется для проверки, является ли возвращаемый номер обратного вызова ожидаемым числом. Это образец теста, в котором используется expect.assertions(), чтобы гарантировать, что все обратные вызовы вызываются до того, как станет известно, прошел ли тест или нет.
test(‘asyncCode calls fetchPicture, fetchName and githubName’, () => {
expect.assertions(3);
function fetchPicture(data) {
expect(data).toBeTruthy();
}
function fetchName(data) {
expect(data).toBeTruthy();
}
function githubName(data) {
expect(data).toBeTruthy();
}
asyncCode(fetchPicture, fetchName, githubName );
});
expect.assertions(3) гарантирует, что 3 обратных вызова вызываются перед прохождением или падением теста.
.быть()
.toBe() в основном просто проверяет, соответствует ли значение ожидаемому. Мы использовали это в нашем быстром примере. Вот еще один:
// profile.test.js
const profile = {
name: ‘Orinami’,
githubUrl: ‘github.com/orinami’,
twitterUrl: ‘twitter.com/orinami_’
};
test(‘expects profile to be an object’, () => {
expect(typeof profile).toBe(‘object’);
});
profile.test.js проходит, потому что profile является объектом, и мы ожидаем, что результатом теста будет объект.
Больше совпадений
Я знаю, что сказал, что мы будем изучать только два метода, но давайте взглянем на еще один в действии. Matchers позволяют нам проверять значения различными способами. Вот некоторые из них:
1. toEqual рекурсивно проверяет каждое поле объекта или массива.
2. toBeNull соответствует только null
3. toBeUndefined соответствует только undefined
4. toBeDefined является противоположностью `toBeUndefined`
5. toMatch проверяет строки на соответствие регулярным выражениям.
6. toContain проверяет, содержит ли массив конкретный элемент.
Посмотрим, как они действуют. Создайте файл и сохраните его как matchers.test.js. Добавьте этот код и запустите, используя npm test:
//toEqual
const data = {
name: ‘Orinami’,
lastname: ‘Olatunji’
};
test(‘Object Assignment’, () => {
expect(data).toEqual({name: ‘Orinami’, lastname: ‘Olatunji’});
});
// For truthiness
test(‘null’, () => {
const n = null;
expect(n).toBeNull();
expect(n).toBeDefined();
expect(n).not.toBeUndefined();
});
test(‘zero’, () => {
const zero = 0;
expect(zero).not.toBeNull();
expect(zero).toBeDefined();
expect(zero).not.toBeUndefined();
});
// For Numbers
const sum = 5 + 6;
test(‘five + six’, () => {
expect(sum).toBeGreaterThan(10);
expect(sum).toBeGreaterThanOrEqual(11);
expect(sum).toBeLessThan(12);
expect(sum).toBeLessThanOrEqual(11);
});
//toContain — For arrays
const languages = [
‘JavaScript’,
‘PHP’,
‘Ruby’,
];
test(‘languages contains JavaScript’, () => {
expect(languages).toContain(‘JavaScript’);
});
//toMatch — For strings
test(‘g in programmer’, () => {
expect(‘Programmer’).toMatch(/g/);
});
Вот результат:
Мы видим, что все наши испытания прошли успешно. Вы можете манипулировать ценностями и увидеть результат. Нет лучшего способа научиться этому, чем активно попробовать!
Тестирование асинхронного кода
Обработка асинхронного кода может быть трудной; Тестируете? Труднее. Давайте посмотрим, как Jest используется для тестирования асинхронного кода.
Обратные вызовы
Использование callbacks - популярный метод обработки асинхронного кода в JavaScript. Давайте посмотрим на этот пример:
test(‘data: go JavaScript!’, done => {
function callback(value) {
expect(value).toBe(‘go Javascript!’);
done();
}
getMessage(callback);
});
Мы передаем done в качестве аргумента, чтобы Jest дождался вызова обратного вызова done перед завершением теста. Если вы опустите done() из кода, тест не будет работать должным образом, потому что функция обратного вызова не будет вызвана вообще.
Обещания
Если в вашем коде используется promises, просто верните promise в своем тесте, и Jest обработает асинхронный вызов и будет ждать его разрешения. Если обещание разрешено, тест будет пройден; в противном случае тест завершится неудачно.
Допустим, чтоgetMessage, возвращает promise со строкой «Изучите веб-разработку на Scotch.io». Мы можем протестировать это просто с помощью этого:
test(‘Learn Web Development on Scotch.io’, () => {
expect.assertions(1);
return getMessage().then(data => {
expect(data).toBe(‘Learn Web Development on Scotch.io’);
});
});
Если вы не используете ключевое слово return, ваш тест закончится еще до того, как он сделает что-нибудь значимое.
У Jest есть и другие способы тестирования асинхронного кода. Он предлагает использование async, await, .resolves и .rejects при написании тестов для асинхронного кода. Подробнее о тестировании асинхронного кода см. [Здесь] (https://facebook.github.io/jest/docs/asynchronous.html).
Встроенный отчет о покрытии кода
Jest может собирать информацию о покрытии кода project/directory, с которым вы работаете, включая непроверенные файлы. Чтобы просмотреть встроенный отчет о покрытии кода, установите Jest глобально. Запустить:
npm install -g jest
Потом:
jest — coverage
Вот результат:
Заключение
Jest позволяет легко и эффективно писать тесты для приложений JavaScript. В этом руководстве вы узнали, как писать и запускать тесты для фрагментов кода JavaScript. В более позднем руководстве я бы разбил тестирование асинхронного кода с помощью Jest на части, которые вы легко поймете, если вы не поняли здесь идею. Если у вас есть вопросы, не стесняйтесь спрашивать. Буду рада это услышать!
