Со временем каждый уважающий себя проект обрастает модульными и интеграционными тестами. В идеальном мире автотесты должны проходить быстро, чтобы их хотелось запускать как локально, так и в CI. Но почему в большинстве проектов запуск тестов отнимает критически много времени?
– Зачастую причиной является неправильная работа с асинхронными операциями. В статье разберемся, как Jest помогает писать молниеносные тесты, и рассмотрим ключевые сценарии.
Дисклеймер: В данной статье примеры рассматриваются с использованием фреймворка для тестирования Jest, но подобная функциональность присутствует и в других инструментах.
Корень проблемы
Перед тем как перейти к конкретным ошибкам в тестировании, определимся с целевыми сценариями:
Используются отложенные во времени операции.
Ограничивается частота или количество поступающих данных.
Использование асинхронности позволяет увеличить отзывчивость приложений, особенно в случаях, когда необходимо обращаться к удаленным ресурсам, выполнять длительные операции, ограничивать частоту и количество поступающих данных. Во всех этих сценариях мы используем либо явно, либо под капотом такие конструкции, как: setInterval и setTimeout, или опираемся на разницу во времени с помощью Date.now или performance.now.
Очень частый паттерн тестирования в данных сценариях – вызов jest.DoneCallback после expect. Но проблема данного подхода в том, что по умолчанию Jest ограничивает время выполнения теста 5 секундами. Это существенно увеличивает время прохождения тестов. Представьте, если таких тестов будут десятки или даже сотни!
it('should return status 200', (done: jest.DoneCallback) => {
fetch('<your-api-url>')
.then((res) => {
expect(res.status).toBe(200);
// уведомляем jest об успешном завершении теста
done();
})
.catch(() => {
// уведомляем jest об ошибке во время выполнения теста
done.fail();
});
});Пути решения
Jest предоставляет fake timers – функциональность по досрочному выполнению асинхронных операций, в том числе к определенному времени. Fake timers подразделяются на два типа:
legacy – признаны устаревшими, использовались по умолчанию до Jest 27
modern – появились в Jest 26, используются по умолчанию. Основаны на библиотеке @sinonjs/fake-timers, благодаря чему поддерживают
queueMicrotaskи имитируют поведениеDate(в отличие от legacy).
Fake timers включают такие синхронные методы, как:
advanceTimersByTime(x)– запускает все отложенные операции, которые должны были выполниться по истечении x миллисекунд.runOnlyPendingTimers()– запускает все запланированные отложенные во времени операции.runAllTimers()– запускает все отложенные во времени операции, даже если они были запланированы уже во время выполненияrunAllTimers().Так, если в тестируемом коде будетsetIntervalили рекурсивныйsetTimeout, мы никогда не дождемся завершенияrunAllTimers().
Сценарий I. Отложенные операции
Для примера возьмем функцию, которая показывает рекламный баннер через 15 секунд.
export function showPromotionBanner(text: string): void {
setTimeout(() => alert(text), 15000);
}При использовании real timers тест будет выполняться свыше 15 секунд, так как Jest тратит процессорное время на запуск теста (обычно около 20 мс, но зависит от сложности кода и ресурсов компьютера). Это стоит учитывать при написании тестов и указывать большее допустимое время.
// Используем real timers
const DELAY_MS: number = 15000;
const TEST_TEXT: string = 'Hello!';
describe('show-promotion-banner', () => {
let alertSpy: jest.SpyInstance;
beforeEach(() => {
alertSpy = jest.spyOn(window, 'alert').mockImplementation();
});
it(
'should call alert after 15 seconds',
(done: jest.DoneCallback) => {
showPromotionBanner('Hello!');
expect(alertSpy).not.toHaveBeenCalled();
setTimeout(() => {
expect(alertSpy).toHaveBeenCalledWith(TEST_TEXT);
// тест завершен
done();
}, DELAY_MS);
},
DELAY_MS + 20
);
});При использовании fake timers:
абстрагируемся от ресурсов компьютера,
отсутствует лишняя вложенность в коде,
тест выполняется критически быстро.
// Используем fake timers
const DELAY_MS: number = 15000;
const TEST_TEXT: string = 'Hello!';
describe('show-delayed-banner', () => {
let alertSpy: jest.SpyInstance;
beforeEach(() => {
jest.useFakeTimers();
alertSpy = jest.spyOn(window, 'alert').mockImplementation();
});
it('should call alert after 15 seconds', () => {
showPromotionBanner('Hello!');
expect(alertSpy).not.toHaveBeenCalled();
// "перематываем" время на 15 секунд вперед
jest.advanceTimersByTime(DELAY_MS);
expect(alertSpy).toHaveBeenCalledWith(TEST_TEXT);
});
});Ниже приведены отчеты Jest о выполнении тестов с использованием разных таймеров. Разница во времени составила около 15 секунд!
Сценарий II. Debounce
При разработке программных продуктов приходится работать с часто изменяемыми источниками данных. Примером может послужить пользовательский ввод, ResizeObserver, Scroll Events и подобное. В таких случаях часть поступающих значений отбрасывают, чтобы реже выполнять логику, особенно если она тяжеловесная или задействована по всему приложению. Существует много способов подобной фильтрации данных, но поскольку в этой статье речь идет о манипуляциях со временем, давайте рассмотрим распространенный подход с использованием debounce. У этого метода есть множество реализаций в различных библиотеках: lodash, rxjs и другие. Debounce откладывает вызов функции до тех пор, пока не истечет указанное время с момента последнего вызова функции. Ниже приведена его базовая реализация.
type BaseFunction = (...args: unknown[] | []) => unknown;
export function debounce<T extends BaseFunction>(
callback: T,
timeout: number
): (...args: Parameters<T>) => void {
let timerId: number;
return (...args: Parameters<T>): void => {
clearTimeout(timerId);
timerId = setTimeout(() => callback(...args), timeout);
};
}Тестироваться будет функция, которая синхронизирует положение скроллбара с LocalStorage. Пока пользователь прокручивает страницу – ничего не происходит. Как только проходит 500 мс после остановки прокручивания, данные записываются в хранилище.
import { debounce } from './debounce';
const STORAGE_KEY: string = 'SCROLL';
const DELAY_MS: number = 500;
// тестируемая функция
export function syncScrollPositionWithStorage(): VoidFunction {
const listener = debounce(saveScrollPosition, DELAY_MS);
window.addEventListener('scroll', listener);
return () => window.removeEventListener('scroll', listener);
}
function saveScrollPosition(): void {
localStorage.setItem(
STORAGE_KEY,
JSON.stringify({ x: window.scrollX, y: window.scrollY })
);
}Ниже приведены тесты на данную функциональность с использованием real-timers и fake-timers.
В тестах с real timers постоянно приходится думать о времени исполнения теста. Например, в данном тесте при изменении задержки в setTimeout (15-17 строчки) – необходимо будет изменить доступное тесту время (32 строка).
// Используем real timers
const SYNC_DELAY_MS: number = 500;
const STORAGE_KEY: string = 'SCROLL';
describe('sync-scroll-position', () => {
let setItemSpy: jest.SpyInstance;
beforeEach(() => {
setItemSpy = jest.spyOn(window.localStorage.__proto__, 'setItem');
});
it('should call setItem with last position with debounce time', (done) => {
syncScrollPositionWithStorage();
setTimeout(() => scrollTo(11, 111), 50);
setTimeout(() => scrollTo(22, 222), 100);
setTimeout(() => scrollTo(33, 333), 250);
setTimeout(() => {
const [KEY, VALUE]: [string, string] = setItemSpy.mock.calls[0];
expect(setItemSpy).toHaveBeenCalledTimes(1);
expect(KEY).toBe(STORAGE_KEY);
expect(JSON.parse(VALUE)).toEqual({
x: 33,
y: 333,
});
// тест завершен
done();
}, SYNC_DELAY_MS + 250 + 20);
});
});В тестах с fake timers от времени можно абстрагироваться. В следующем примере можно было бы использовать jest.runAllTimers(), чтобы дождаться завершения всех отложенных операций, но был выбран jest.advanceTimersByTime() для более точного тестирования времени до синхронизации.
const SYNC_DELAY_MS: number = 500;
const STORAGE_KEY: string = 'SCROLL';
describe('sync-scroll-position', () => {
let setItemSpy: jest.SpyInstance;
beforeEach(() => {
jest.useFakeTimers();
setItemSpy = jest.spyOn(window.localStorage.__proto__, 'setItem');
});
it('should call setItem with last position with debounce time', () => {
syncScrollPositionWithStorage();
setTimeout(() => scrollTo(11, 111), 50);
setTimeout(() => scrollTo(22, 222), 100);
setTimeout(() => scrollTo(33, 333), 250);
jest.advanceTimersByTime(SYNC_DELAY_MS + 250);
const [KEY, VALUE]: [string, string] = setItemSpy.mock.calls[0];
expect(setItemSpy).toHaveBeenCalledTimes(1);
expect(KEY).toBe(STORAGE_KEY);
expect(JSON.parse(VALUE)).toEqual({
x: 33,
y: 333,
});
});
});Ниже приведены отчеты Jest о выполнении тестов с использованием разных таймеров. Разница во времени составила ~770 мс.
Вам может показаться, что разница в 770 мс не очень заметна, но в реальности на каждый блок кода с debounce зачастую требуется больше одного теста.
В одном из проектов (~400k строк) было найдено 219 мест применения debounce. В 179 случаях debounce использовался со средним временем задержки – 0.3 секунды. Таким образом, если каждый блок с debounce будет покрыт хотя бы 3 тестами, время тестирования составит 179 * 3 * 0.3 = 161.1 секунды! Прибавим к этому числу другие операции с подобным временем задержки, и рассчитанное значение увеличится многократно. Вот почему использование fake timers необходимо вашему проекту.
Как внедрить fake timers в проект
Если в проекте существует большое количество тестов, использующих real timers, переезд на новые таймеры целиком займет довольно много времени. Рациональное решение в данной ситуации – постепенная миграция.
Jest позволяет включать fake timers локально. Для этого вызовем метод jest.useFakeTimers() перед выполнением необходимого набора тестов, и jest.useRealTimers() после. За счет такого подхода можно внедрять fake timers на уровне блока кода. Если же вы переводите весь тестовый файл на fake timers, то вам достаточно будет добавить опцию jest.useFakeTimers() в начале файла.
beforeAll(() => jest.useFakeTimers());
// здесь ваши тесты
afterAll(() => jest.useRealTimers());Когда большинство тестов будет использовать fake timers – включим их глобально в файле jest.config.js.
module.exports = {
// ...
fakeTimers: {
enableGlobally: true,
},
};Заключение
Современные фреймворки для тестирования предоставляют удобную функциональность по работе с отложенными во времени операциями, благодаря чему появляется возможность значительно ускорить прохождение тестов, а, следовательно, повысить удовлетворенность и производительность разработчиков. Вдохните в ваши тесты новую жизнь за счет рассмотренных в статье практик!
