Jest — это инструмент модульного тестирования JavaScript с открытым исходным кодом, основанный на платформе Jasmine, выпущенной Facebook. Он обеспечивает встроенную поддержку API DOM тестовой среды, библиотеку утверждений, библиотеку макетов и т. Д. Он также включает тестирование моментальных снимков, мгновенную обратную связь и другие функции. Он автоматически интегрирует все инструменты тестирования, необходимые разработчикам, такие как утверждения, JSDom, отчеты о покрытии и т. д. Это среда тестирования с практически нулевой конфигурацией. И это очень удобно для тестирования React, который также является интерфейсной средой Facebook с открытым исходным кодом.
1.2 Кто пользуется?
1.3 Торговая точка
Jest — это среда тестирования, созданная Facebook.По сравнению с другими средами тестирования, главная особенность Jest заключается в том, что она имеет встроенные общие инструменты тестирования, такие как встроенные утверждения и инструменты тестового покрытия, которые можно использовать «из коробки». .
В качестве среды тестирования, ориентированной на внешний интерфейс, Jest может использовать свою уникальную функцию тестирования моментальных снимков для автоматического тестирования распространенных сред, таких как React, путем сравнения файлов моментальных снимков, сгенерированных кодом пользовательского интерфейса.
Кроме того, тестовые случаи Jest выполняются параллельно, и выполняются только тесты, соответствующие измененным файлам, что повышает скорость тестирования. В настоящее время количество звезд на Github перевалило за 10 000, и помимо Facebook, другие компании отрасли также начали переходить с других фреймворков тестирования на Jest, например, попытка Airbnb. будет относительно быстрым в будущем.
2 Подготовка перед занятием
2.1 Платформа тестирования
Роль среды тестирования заключается в предоставлении удобного синтаксиса для описания тестовых случаев и группировки тестовых случаев.
Существует два типа фреймворков тестирования: TDD (разработка, управляемая тестированием) и BDD (разработка, управляемая поведением). Я понимаю, что разница между ними в основном заключается в некоторых синтаксических различиях, где BDD предоставляет более читаемый синтаксис варианта использования, для получения подробной информации о разница см.The Difference Between TDD and BDD - Josh Davisодна статья.
Общие среды тестирования включают Jasmine, Mocha и Jest, которые будут представлены в этой статье.
2.2 Библиотека утверждений
Библиотека утверждений в основном предоставляет семантические методы для вынесения различных суждений о значениях, задействованных в тесте. Эти семантические методы возвращают результат теста, успешный или неуспешный. Общие библиотеки утверждений включают Should.js, Chai.js и т. д.
Инструмент покрытия тестами
Он используется для подсчета тестовых случаев тестовых случаев кода и создания соответствующих отчетов, таких как Стамбул.
3 Начать
инициализировать проект
mkidr $CODE_PATH && cd $CODE_PATH
npm init -y
npm i -D jest
⚠️ jest по умолчанию не поддерживает es6, если нужно протестировать es6, то требуется дополнительная установка npm i -D babel-jest babel-core babel-preset-env и увеличить.babelrcКонфигурация выглядит следующим образом:
3.1 Первый пример 🌰 1+2 = 3
Давайте начнем с написания примера функции, которая складывает два числа. Сначала создайтеsum.js sum.test.jsдокумент︰
touch sum.js sum.test.js
code .
::sum.js::
export default function sum(a, b) {
return a + b
}
::sum.test.js::
import sum from './sum'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3)
})
⚠️ Имя тестового сценария Jest похоже на **.test.js. Независимо от того, запущен ли Jest глобально или через npm test, он выполнит все файлы **.test.js или *.spec.js в текущем каталоге и завершит тест . бегатьnpm run test
Выше приведен небольшой пример официального сайта
3.2 Новые попытки
🤔 Вы можете изменить функцию нижеsumрезультаты проб и ошибок
::sum.js::
export default function sum(a, b) {
return a + b + 1
}
бегатьnpm run test
Тест провален 💔, если бы мы научились использовать шутку, наш рабочий процесс был бы таким:
Анализ требований ➡️ Написание модульных тестов ➡️ Написание кода ➡️ Все модульные тесты пройдены Означает ли это, что все модульные тесты проходят без ошибок? Не всегда
...
// not
test('Adds 2 + 2 to NOT equal 5', () => {
expect(functions.add(2, 2)).not.toBe(5);
});
...
.notМодификаторы позволяют проверить, что результат не равен определенному значению, что почти точно совпадает с английской грамматикой, которую легко понять.
⚠️.toEqualСопоставитель будет рекурсивно проверять, равны ли все атрибуты и значения атрибутов объекта, поэтому, если вы хотите сравнить тип приложения, используйте.toEqualсопоставитель вместо.toBe.
4.5 More
Стиль утверждения, используемый шуткой, не сильно отличается от стиля сообщества.
Для получения дополнительных методов утверждения см.:Expect · Jest
4.6 Проверка асинхронности
JSONPlaceholderЭто веб-сайт, который предоставляет бесплатный онлайн REST API, Мы можем использовать URL-адрес, который он предоставляет, для тестирования сетевых запросов и параметров запроса во время разработки. Или его также можно использовать, когда нашей программе нужно получить поддельные данные и поддельные изображения.
// functions.js
fetchUser: () =>
axios
.get('https://jsonplaceholder.typicode.com/users/1')
.then(res => res.data)
// functions.test.js
// Async Await
test('User fetched name should be Leanne Graham', async () => {
expect.assertions(1)
const data = await functions.fetchUser()
expect(data.name).toEqual('Leanne Graham')
})
Выше мы вызвали expect.assertions(1), который гарантирует, что в асинхронном тестовом случае утверждение будет выполнено в функции обратного вызова. Это полезно при тестировании асинхронного кода.док. Зло будет уничтожено. Цао Цао/jest/docs/ in…конкретная документация.
5 реальный бой
5.1 chunkArray
Давайте напишем функцию ::chunkArray:: которая будетarrayразделить на несколькоsizeкуски длины и сгруппируйте эти куски в новый массив. Если массив нельзя разделить на все блоки одинаковой длины, последние оставшиеся элементы образуют блок.
Пример:
Пример 1: Массив[1,2,3,4,5,6,7,8,9,10]Размер разделения равен 2, тогда конечный результат равен[[1,2],[3,4],[5,6],[7,8],[9,10]]
Пример 2: Массив[1,2,3,4,5,6,7]Размер разделения равен 3, тогда выход[[1,2,3],[4,5,6],[7]Вышеизложенный процесс анализа, который является описанием требований в нашей ежедневной разработке Теперь мы преобразуем требования в отдельные тесты
::chunkArray.test.js::
// 确认chunkArray 已经被声明定义
test('chunkArray function exists', () => {
expect(chunkArray).toBeDefined()
})
// 验证实例1
test('Chunk an array of 10 values with length of 2', () => {
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const len = 2;
const chunkedArr = chunkArray(numbers, len);
expect(chunkedArr).toEqual([[1, 2], [3, 4], [5, 6], [7, 8], [9, 10]]);
});
// 验证实例2
test('Chunk an array of 10 values with length of 2', () => {
const numbers = [1, 2, 3, 4, 5, 6, 7]
const len = 3
const chunkedArr = chunkArray(numbers, len)
expect(chunkedArr).toEqual([[1, 2, 3],[4, 5, 6], [7])
})
Следующим шагом является написание функции chunkArray со ссылкой
::chunkArray.js::
const chunkArray = (arr, len) => {
// Init chunked arr
const chunkedArr = []
// Loop through arr
arr.forEach(val => {
// Get last element
const last = chunkedArr[chunkedArr.length - 1]
// Check if last and if last length is equal to the chunk len
if (!last || last.length === len) {
chunkedArr.push([val])
} else {
last.push(val)
}
})
return chunkedArr
}
Как и выше, это процесс разработки. Этот геймплей также отражен в некоторых сообществах, где алгоритмы смешивают алгоритмы, таких какcodewars
🤔 Пишу сюда, думаю о смысле модульного тестирования? Обобщенно следующим образом:
Написание одного теста — это чтобы разобраться в требованиях, прежде чем писать код, сделайте свое понимание требований более ясным.
Одиночный тест похож на робота, помогающего вам проверить правильность модуля.При сложности и масштабе проекта одиночный тест позволяет разработчикам заранее знать масштаб влияния модификаций и изменений модуля.
6 Тестовое покрытие
Jest имеет встроенный инструмент тестового покрытия istanbul, добавьте конфигурацию в ::package.json::