Использование MSW или JSON Server

При тестировании веб-приложений важным моментом является имитация взаимодействия с сервером. Для этого в тестах часто используется мокирование запросов, что позволяет контролировать данные, которые будут возвращены в ответ на HTTP-запросы. В этой главе рассмотрены два подхода для мокирования: использование MSW (Mock Service Worker) и JSON Server. Эти инструменты позволяют быстро и эффективно имитировать работу серверной части приложения, обеспечивая стабильность и предсказуемость тестов.

MSW (Mock Service Worker)

Mock Service Worker (MSW) — это библиотека для мокирования HTTP-запросов, которая работает на уровне браузера. MSW перехватывает запросы, отправляемые веб-приложением, и может возвращать заранее подготовленные ответы. Это идеальный инструмент для интеграционных тестов, когда нужно изолировать фронтенд от реального бэкенда, но при этом сохранить реалистичную имитацию серверной логики.

MSW работает через Service Worker, что позволяет ему быть абсолютно прозрачным для браузера. Он не вмешивается в саму логику приложения и лишь перенаправляет запросы на моки, которые разработчик или тестировщик подготовил заранее.

Установка и настройка MSW

Для начала необходимо установить саму библиотеку:

npm install msw

После установки создается файл для настройки MSW, где описываются моки. В этом примере создается сервис для мокирования GET-запроса:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ username: 'testuser', email: 'testuser@example.com' })
    );
  }),
];

Здесь определен обработчик для GET-запроса к /api/user, который будет возвращать фальшивые данные о пользователе.

Далее создается сервис worker, который будет активировать моки в тестах:

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

Теперь в тестах можно запускать MSW перед выполнением тестов, чтобы моки начали работать:

// src/setupTests.js
import { server } from './mocks/server'; // сервер для моков

beforeAll(() => server.listen());  // запуск сервера для мокирования запросов
afterEach(() => server.resetHandlers()); // сброс моков после каждого теста
afterAll(() => server.close()); // закрытие сервера после всех тестов
Применение в тестах с Playwright

Когда MSW настроен, можно легко интегрировать его с Playwright для создания тестов. Playwright позволяет взаимодействовать с веб-страницей, а MSW перехватывает все запросы, отправляемые этой страницей. В Playwright тестах можно проверять как страница реагирует на измененные или замокированные данные.

Пример теста с Playwright и MSW:

// test.spec.js
import { test, expect } from '@playwright/test';

test('тест с мокированием данных', async ({ page }) => {
  await page.goto('http://localhost:3000');

  // Ожидание, что на странице отобразится имя пользователя из мока
  const username = await page.textContent('.username');
  expect(username).toBe('testuser');
});

В этом тесте Playwright заходит на страницу, и MSW обеспечивает получение данных с сервера, который имитирует ответ.

JSON Server

JSON Server — это инструмент, который позволяет быстро настроить фейковый REST API, работающий с файлами JSON. Он идеально подходит для быстрого мокирования API в процессе тестирования и разработки. JSON Server можно использовать в связке с Playwright, если нужно эмулировать реальные серверные данные, например, при тестировании функционала, который зависит от работы с базой данных.

Установка и настройка JSON Server

Для установки JSON Server необходимо выполнить команду:

npm install json-server

После установки нужно создать файл конфигурации, например, db.json, который будет содержать данные, доступные через API:

{
  "users": [
    {
      "id": 1,
      "username": "testuser",
      "email": "testuser@example.com"
    }
  ]
}

Запуск JSON Server выполняется с помощью команды:

npx json-server --watch db.json --port 5000

Теперь API доступно по адресу http://localhost:5000. В результате, для каждого запроса к /users будет возвращаться список пользователей, определенный в db.json.

Применение в тестах с Playwright

С помощью Playwright можно выполнять запросы к API, который обслуживает JSON Server. Для этого можно использовать стандартные функции Playwright для отправки HTTP-запросов.

Пример теста с Playwright и JSON Server:

// test.spec.js
import { test, expect } from '@playwright/test';

test('тест с использованием JSON Server', async ({ page }) => {
  // Инициализация данных через API
  const response = await page.request.get('http://localhost:5000/users');
  const user = await response.json();

  // Проверка данных, полученных через запрос
  expect(user[0].username).toBe('testuser');
  expect(user[0].email).toBe('testuser@example.com');
});

В этом тесте Playwright выполняет HTTP-запрос к JSON Server и проверяет данные о пользователе. Такой подход позволяет имитировать работу с реальным сервером и проверять функционал страницы в условиях, близких к боевым.

Сравнение MSW и JSON Server

Оба инструмента могут быть использованы для мокирования данных, но между ними есть ключевые различия:

  • MSW идеально подходит для тестов, когда нужно перехватывать запросы внутри браузера. Он предоставляет гибкость и позволяет модулировать ответы в зависимости от запросов, что полезно для тестирования фронтенд-логики.

  • JSON Server — это более простой способ создать фейковый API, который можно использовать для мокирования бэкенда. Он может быть полезен, если нужно симулировать сложную серверную логику или тестировать работу с базой данных, но требует дополнительных настроек, таких как запуск локального сервера.

Выбор между MSW и JSON Server

Выбор между MSW и JSON Server зависит от конкретных задач тестирования:

  • Если цель — мокировать API на уровне браузера с полным контролем за запросами, то лучше использовать MSW.
  • Если нужно быстро создать полноценный фейковый сервер с реальными API-эндпоинтами и базой данных, то JSON Server станет отличным выбором.

Оба инструмента могут быть использованы совместно для создания гибкой и стабильной тестовой среды, в которой можно уверенно проверять работу веб-приложений при различных сценариях.

Оглавление