Как мокать сетевые запросы, таймеры, локальное хранилище?

1️⃣ Как кратко ответить

Для мокирования сетевых запросов используйте библиотеки, такие как nock или msw. Таймеры можно мокировать с помощью jest.useFakeTimers(). Локальное хранилище мокируется через переопределение методов localStorage в тестах.

2️⃣ Подробное объяснение темы

Мокирование — это техника, используемая в тестировании для замены реальных зависимостей на поддельные объекты, которые имитируют поведение оригинальных. Это позволяет изолировать тестируемый код и избежать побочных эффектов. Рассмотрим, как мокировать сетевые запросы, таймеры и локальное хранилище.

Мокирование сетевых запросов

Сетевые запросы можно мокировать с помощью библиотек, таких как nock или msw (Mock Service Worker).

Пример с использованием nock:

const nock = require('nock');
​
// Мокируем HTTP GET запрос к 'https://api.example.com/user'
nock('https://api.example.com')
  .get('/user')
  .reply(200, { id: 1, name: 'John Doe' });
​
// Функция, которая делает запрос
async function fetchUser() {
  const response = await fetch('https://api.example.com/user');
  return response.json();
}
​
// Тест
test('fetchUser returns user data', async () => {
  const user = await fetchUser();
  expect(user).toEqual({ id: 1, name: 'John Doe' });
});

• nock('https://api.example.com'): Устанавливает базовый URL для мокирования.
• .get('/user'): Определяет, что мы мокируем GET запрос к /user.
• .reply(200, { id: 1, name: 'John Doe' }): Указывает, что в ответ на запрос будет возвращен статус 200 и тело ответа.

Мокирование таймеров

Таймеры можно мокировать с помощью встроенных возможностей тестовых фреймворков, таких как Jest.

Пример с использованием Jest:

jest.useFakeTimers();
​
// Функция, которая использует таймер
function delayedFunction(callback) {
  setTimeout(() => {
    callback('done');
  }, 1000);
}
​
// Тест
test('delayedFunction calls callback after 1 second', () => {
  const callback = jest.fn();
  delayedFunction(callback);
​
  // Перематываем таймеры
  jest.advanceTimersByTime(1000);
​
  expect(callback).toHaveBeenCalledWith('done');
});

• jest.useFakeTimers(): Переключает Jest на использование поддельных таймеров.
• jest.advanceTimersByTime(1000): Перематывает таймеры на 1000 миллисекунд, чтобы вызвать отложенные функции.

Мокирование локального хранилища

Локальное хранилище можно мокировать путем переопределения его методов в тестах.

Пример:

// Переопределяем методы localStorage
const localStorageMock = (() => {
  let store = {};
  return {
    getItem: (key) => store[key] || null,
    setItem: (key, value) => {
      store[key] = value.toString();
    },
    clear: () => {
      store = {};
    },
  };
})();
​
Object.defineProperty(window, 'localStorage', {
  value: localStorageMock,
});
​
// Функция, которая использует localStorage
function saveToLocalStorage(key, value) {
  localStorage.setItem(key, value);
}
​
// Тест
test('saveToLocalStorage saves data to localStorage', () => {
  saveToLocalStorage('testKey', 'testValue');
  expect(localStorage.getItem('testKey')).toBe('testValue');
});

• localStorageMock: Создает объект, имитирующий поведение localStorage.
• Object.defineProperty(window, 'localStorage', { value: localStorageMock }): Переопределяет localStorage в глобальном объекте window на время теста.

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