Mock Server (MSW)

Инструмент для перехвата сетевых запросов на уровне браузера. Позволяет разрабатывать фронтенд независимо от готовности бэкенда, используя типизированные моки.

Мокирование API (Документация MSW)

Преимущества: Позволяет тестировать сценарии ошибок, задержки сети и различные состояния данных без реального бэкенда.

Структура Mock-слоя

Правила именования и расположения

Хендлеры (Handlers):
Располагаются в src/entities/[entity-name]/handlers/. Файлы называются [entity-name].handlers.ts. Содержат логику перехвата специфичных для сущности запросов.
Моки (Mocks):
Располагаются в src/entities/[entity-name]/mock/. Файлы называются [entity-name].mock.ts. Содержат статические или динамические данные, имитирующие ответ сервера.
Конфигурация:
Общие настройки MSW находятся в src/shared/api/msw/. Регистрация всех хендлеров происходит в handlers.ts.

011. Создание моков

Определяем массив данных, которые будет возвращать сервер. Используем интерфейсы из папки types/ для обеспечения типизации.

entities/[entity-name]/mock/[entity-name].mock.ts

import { type IEntity } from "../types";

export const ENTITY_MOCK: IEntity[] = [
	{
		id: "1",
		fullName: "John Doe",
		date: "2024-03-22",
		status: "active"
	},
	{
		id: "2",
		fullName: "Jane Smith",
		date: "2024-03-21",
		status: "pending"
	}
];

022. Описание хендлеров

Используем библиотеку msw для перехвата конкретных URL. Здесь же можно имитировать задержку сети или ошибки сервера.

entities/[entity-name]/handlers/[entity-name].handlers.ts

import { HttpResponse, http } from "msw";
import { ENV } from "@/shared/config";
import { ENTITY_MOCK } from "../mock";

export const entityHandlers = [
	http.get(`${ENV.VITE_API_URL}/entity/list`, () => {
		return HttpResponse.json({
			data: ENTITY_MOCK
		});
	}),

	http.post(`${ENV.VITE_API_URL}/entity/update`, async ({ request }) => {
		const body = await request.json();
		return HttpResponse.json({ success: true, data: body });
	})
];

033. Конфигурация воркера

Создаем экземпляр worker-а в shared/api/msw/browser.ts для перехвата запросов в браузере.

shared/api/msw/browser.ts

import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

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

044. Реестр хендлеров

Собираем хендлеры всех сущностей в единый массив в shared/api/msw/handlers.ts.

shared/api/msw/handlers.ts

import { entityOneHandlers } from "@/entities/entity-one/handlers";
import { entityTwoHandlers } from "@/entities/entity-two/handlers";

export const handlers = [
	...entityOneHandlers,
	...entityTwoHandlers
];

055. Инициализация в App

Создаем асинхронную функцию запуска в app/init/msw.ts, которая проверяет флаги окружения.

app/init/msw.ts

import { ENV } from "@/shared/config";

export const initMsw = async () => {
	if (import.meta.env.DEV || ENV.VITE_ENABLE_MSW === "true") {
		const { worker } = await import("@/shared/api/msw/browser");
		return worker.start({
			onUnhandledRequest: "bypass"
		});
	}
	return Promise.resolve();
};

066. Точка входа (Main)

Дожидаемся запуска MSW перед рендерингом приложения в src/main.tsx.

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { initMsw } from "./app/init/msw";
import App from "./app";

const container = document.getElementById("root");

if (container) {
	const root = createRoot(container);

	initMsw().then(() => {
		root.render(
			<StrictMode>
				<App />
			</StrictMode>
		);
	});
}

077. Переменные окружения

Управление включением моков через файл .env.

.env

VITE_ENABLE_MSW=true