Как создать Mock API для тестирования: полное руководство

Нужно создать mock API для тестирования, но не знаете с чего начать? В этом руководстве вы узнаете 3 способа создать mock API за 5-30 минут с примерами кода для Node.js, Python и React. К концу статьи вы сможете запустить свой собственный mock API и начать разработку независимо от backend.

🎯 Что такое Mock API и зачем он нужен?

Mock API (мок API) — это имитация реального API, которая возвращает заранее определенные ответы на HTTP запросы. Это позволяет разработчикам работать без зависимости от реального backend сервера.

Типичные сценарии использования

Вот реальные ситуации, когда mock API спасает время и нервы:

• Startup разработка: Backend займет 3 недели, а дизайн готов сейчас. Mock API позволяет frontend команде начать разработку немедленно.
• E2E тестирование: Playwright/Cypress тесты не должны падать из-за недоступности staging API.
• Rate limiting: Внешний API блокирует после 100 запросов/час, а вам нужно протестировать 1000 сценариев.
• Offline разработка: Работаете в самолете или кафе без стабильного интернета.

🚀 Способ 1: LightBox API (облачный, 5 минут)

LightBox API — облачный сервис для создания mock API без установки и настройки. Идеально подходит для команд и проектов, где нужен общий доступ к mock endpoints.

https://api.lightboxapi.ru/mock/your-workspace

{
  "method": "GET",
  "path": "/users",
  "response": {
    "status": 200,
    "headers": {
      "Content-Type": "application/json"
    },
    "body": [
      {
        "id": 1,
        "name": "Иван Петров",
        "email": "ivan@example.com",
        "role": "admin"
      },
      {
        "id": 2,
        "name": "Мария Сидорова",
        "email": "maria@example.com",
        "role": "user"
      }
    ]
  }
}

// Замените URL на ваш mock API
const API_URL = 'https://api.lightboxapi.ru/mock/your-workspace';

// Делайте запросы как к обычному API:
const response = await fetch(`${API_URL}/users`);
const users = await response.json();
console.log(users); // [{ id: 1, name: "Иван Петров", ... }, ...]

✅ Преимущества LightBox API:

• Облачный доступ — работает везде, нет необходимости что-то устанавливать
• Командная работа — все разработчики используют одни endpoints
• Логирование запросов — видно все запросы в реальном времени
• CI/CD готовность — стабильный URL для тестов
• Импорт OpenAPI — загрузите спецификацию и получите mock автоматически

🖥 Способ 2: Mockoon (локальный, 10 минут)

Mockoon — бесплатное desktop приложение для создания локальных mock серверов. Идеально для индивидуальной разработки и работы офлайн.

# macOS (Homebrew)
brew install mockoon

# Windows
winget install mockoon.mockoon
# или скачайте с https://mockoon.com/download

# Linux (Snap)
snap install mockoon

# Linux (AppImage)
# Скачайте с https://mockoon.com/download

[
  {"id": 1, "name": "John Doe", "email": "john@example.com"},
  {"id": 2, "name": "Jane Smith", "email": "jane@example.com"}
]

# Проверьте в терминале:
curl http://localhost:3000/users

# Или в браузере:
# http://localhost:3000/users

✅ Преимущества Mockoon:

• Без интернета — работает полностью локально
• Графический интерфейс — удобный UI для создания endpoints
• Динамические данные — templating для генерации случайных данных
• Импорт/Экспорт — OpenAPI, Swagger, Postman коллекции
• CLI версия — для CI/CD: mockoon-cli start --data ./environment.json

⚡ Способ 3: JSON Server (минималистичный, 1 минута)

JSON Server — npm пакет, который создает REST API из JSON файла за секунды. Самый быстрый способ получить работающий mock API.

# Глобальная установка
npm install -g json-server

# Или в проект
npm install json-server --save-dev

{
  "users": [
    {"id": 1, "name": "John Doe", "email": "john@example.com", "role": "admin"},
    {"id": 2, "name": "Jane Smith", "email": "jane@example.com", "role": "user"}
  ],
  "posts": [
    {"id": 1, "title": "Hello World", "body": "First post content", "userId": 1},
    {"id": 2, "title": "Second Post", "body": "More content here", "userId": 2}
  ],
  "comments": [
    {"id": 1, "body": "Great post!", "postId": 1},
    {"id": 2, "body": "Thanks for sharing", "postId": 1}
  ]
}

# Запуск на порту 3001
json-server --watch db.json --port 3001

# Все ресурсы автоматически получают CRUD endpoints:

# GET (все записи)
curl http://localhost:3001/users

# GET (одна запись)
curl http://localhost:3001/users/1

# POST (создать)
curl -X POST -H "Content-Type: application/json" \
  -d '{"name": "New User", "email": "new@example.com"}' \
  http://localhost:3001/users

# PUT (обновить)
curl -X PUT -H "Content-Type: application/json" \
  -d '{"name": "Updated Name", "email": "updated@example.com"}' \
  http://localhost:3001/users/1

# DELETE (удалить)
curl -X DELETE http://localhost:3001/users/1

# Фильтрация и поиск:
curl "http://localhost:3001/users?role=admin"
curl "http://localhost:3001/users?_sort=name&_order=asc"
curl "http://localhost:3001/posts?userId=1"

✅ Преимущества JSON Server:

• Минимальный setup — буквально 1 минута до работающего API
• Полный CRUD — GET, POST, PUT, PATCH, DELETE из коробки
• Фильтрация и сортировка — query parameters работают автоматически
• Связи между данными — ?_expand=user подгружает связанные записи

💻 Примеры использования в коде

React + TypeScript пример

// types.ts
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// config.ts
const API_URL = process.env.NODE_ENV === 'development'
  ? 'https://api.lightboxapi.ru/mock/your-workspace'
  : 'https://api.yourapp.com';

// hooks/useUsers.ts
import { useEffect, useState } from 'react';

export function useUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(`${API_URL}/users`)
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch users');
        return res.json();
      })
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  return { users, loading, error };
}

// components/UserList.tsx
function UserList() {
  const { users, loading, error } = useUsers();

  if (loading) return <div className="spinner">Loading...</div>;
  if (error) return <div className="error">Error: {error}</div>;

  return (
    <ul className="user-list">
      {users.map(user => (
        <li key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <span className={`badge ${user.role}`}>{user.role}</span>
        </li>
      ))}
    </ul>
  );
}

Node.js + Jest тесты

// __tests__/api.test.js
const axios = require('axios');

const API_URL = 'https://api.lightboxapi.ru/mock/your-workspace';

describe('Users API', () => {
  test('should fetch all users', async () => {
    const response = await axios.get(`${API_URL}/users`);

    expect(response.status).toBe(200);
    expect(Array.isArray(response.data)).toBe(true);
    expect(response.data.length).toBeGreaterThan(0);
  });

  test('should have required fields', async () => {
    const response = await axios.get(`${API_URL}/users`);
    const user = response.data[0];

    expect(user).toHaveProperty('id');
    expect(user).toHaveProperty('name');
    expect(user).toHaveProperty('email');
  });

  test('should fetch single user', async () => {
    const response = await axios.get(`${API_URL}/users/1`);

    expect(response.status).toBe(200);
    expect(response.data.id).toBe(1);
  });
});

Python + requests пример

import requests
from typing import List, TypedDict

class User(TypedDict):
    id: int
    name: str
    email: str
    role: str

API_URL = 'https://api.lightboxapi.ru/mock/your-workspace'

def get_users() -> List[User]:
    """Получить список всех пользователей"""
    response = requests.get(f'{API_URL}/users')
    response.raise_for_status()
    return response.json()

def get_user(user_id: int) -> User:
    """Получить пользователя по ID"""
    response = requests.get(f'{API_URL}/users/{user_id}')
    response.raise_for_status()
    return response.json()

def create_user(name: str, email: str, role: str = 'user') -> User:
    """Создать нового пользователя"""
    response = requests.post(
        f'{API_URL}/users',
        json={'name': name, 'email': email, 'role': role}
    )
    response.raise_for_status()
    return response.json()

# Использование:
if __name__ == '__main__':
    users = get_users()
    print(f"Found {len(users)} users")

    for user in users:
        print(f"- {user['name']} ({user['email']})")

Vue.js + Composition API

// composables/useUsers.js
import { ref, onMounted } from 'vue';

const API_URL = import.meta.env.DEV
  ? 'https://api.lightboxapi.ru/mock/your-workspace'
  : 'https://api.yourapp.com';

export function useUsers() {
  const users = ref([]);
  const loading = ref(true);
  const error = ref(null);

  const fetchUsers = async () => {
    try {
      loading.value = true;
      const response = await fetch(`${API_URL}/users`);
      if (!response.ok) throw new Error('Failed to fetch');
      users.value = await response.json();
    } catch (e) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchUsers);

  return { users, loading, error, refetch: fetchUsers };
}

// UserList.vue
<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: { error }</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      { user.name } - { user.email }
    </li>
  </ul>
</template>

<script setup>
import { useUsers } from './composables/useUsers';
const { users, loading, error } = useUsers();
</script>

📊 Сравнение методов

🎯 Best Practices при создании Mock API

{
  "id": 42,
  "name": "Александр Иванов",
  "email": "a.ivanov@company.ru",
  "phone": "+7 (999) 123-45-67",
  "created_at": "2025-11-15T10:30:00Z"
}

// config.js
const API_URL = {
  development: process.env.MOCK_API_URL || 'http://localhost:3001',
  staging: 'https://api.lightboxapi.ru/mock/staging',
  production: 'https://api.yourapp.com'
}[process.env.NODE_ENV];

🔍 FAQ: Часто задаваемые вопросы

// В development используем mock
const API_URL = process.env.NODE_ENV === 'development'
  ? 'https://api.lightboxapi.ru/mock/workspace'
  : 'https://api.production.com';

🎁 Бонус: Начните с LightBox API бесплатно

LightBox API предлагает бесплатный план, которого достаточно для большинства проектов:

• 1,000 запросов/день — хватит на команду из 2-3 разработчиков
• 10 endpoints — достаточно для MVP
• Логирование 7 дней — для отладки
• Командная работа — до 3 участников

📝 Выводы

В этой статье мы рассмотрели 3 способа создать Mock API для тестирования:

1. LightBox API — облачный сервис, идеален для команд и CI/CD (5 минут)
2. Mockoon — desktop приложение, отлично для индивидуальной работы офлайн (10 минут)
3. JSON Server — npm пакет, максимально быстрый старт (1 минута)

Начните с того способа, который подходит вашему проекту, и не тратьте время на ожидание backend!