🌐 Testing API Calls: MSW Integration

🎯 Introduction

Welcome to the API testing command center! 🌐 If testing regular functions were like checking individual components in a factory, then testing API calls would be like testing the entire supply chain - complete with network requests, data transformation, error handling, and complex async workflows that need to work reliably even when external services are unavailable or behaving unpredictably!

API testing with Mock Service Worker (MSW) provides the most realistic testing environment by intercepting actual HTTP requests at the network level. Unlike simple mocking, MSW allows you to test your API layer exactly as it behaves in production, including error handling, request/response transformations, and complex async patterns.

By the end of this tutorial, you’ll be a master of API testing, capable of thoroughly testing everything from simple GET requests to complex multi-step workflows with authentication, error recovery, and optimistic updates. You’ll learn to test API interactions with confidence, ensuring your applications handle all network scenarios gracefully. Let’s build some bulletproof API tests! 🌟

📚 Understanding API Testing with MSW

🤔 Why Mock Service Worker?

MSW provides network-level request interception, allowing you to test API interactions exactly as they occur in real applications without depending on external services.

// 🌟 Setting up comprehensive MSW testing environment

import React, { useState, useEffect, useCallback, useMemo, useContext, createContext } from 'react';
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import '@testing-library/jest-dom';

// API response types and interfaces
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
  isActive: boolean;
  role: 'admin' | 'user' | 'moderator';
  createdAt: string;
  updatedAt: string;
}

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
  category: string;
  inStock: boolean;
  stockCount: number;
  imageUrl?: string;
  tags: string[];
  createdAt: string;
}

interface Order {
  id: string;
  userId: string;
  items: OrderItem[];
  total: number;
  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
  shippingAddress: Address;
  createdAt: string;
  updatedAt: string;
}

interface OrderItem {
  productId: string;
  quantity: number;
  price: number;
  product?: Product;
}

interface Address {
  street: string;
  city: string;
  state: string;
  zipCode: string;
  country: string;
}

interface ApiError {
  message: string;
  code: string;
  field?: string;
  details?: Record<string, any>;
}

interface PaginatedResponse<T> {
  data: T[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
  };
}

interface LoginRequest {
  email: string;
  password: string;
}

interface LoginResponse {
  user: User;
  token: string;
  refreshToken: string;
  expiresIn: number;
}

interface CreateProductRequest {
  name: string;
  price: number;
  description: string;
  category: string;
  stockCount: number;
  tags: string[];
}

interface UpdateProductRequest extends Partial<CreateProductRequest> {
  id: string;
}

// API service with comprehensive error handling
class ApiService {
  private baseUrl: string;
  private token: string | null = null;

  constructor(baseUrl: string = 'https://api.example.com') {
    this.baseUrl = baseUrl;
  }

  setToken(token: string | null): void {
    this.token = token;
  }

  private async makeRequest<T>(
    endpoint: string,
    options: RequestInit = {}
  ): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;
    
    const headers: HeadersInit = {
      'Content-Type': 'application/json',
      ...options.headers,
    };

    if (this.token) {
      headers.Authorization = `Bearer ${this.token}`;
    }

    const config: RequestInit = {
      ...options,
      headers,
    };

    try {
      const response = await fetch(url, config);
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({
          message: 'An error occurred',
          code: 'UNKNOWN_ERROR'
        }));
        
        throw new ApiError(
          errorData.message || 'Request failed',
          response.status,
          errorData.code || 'HTTP_ERROR',
          errorData
        );
      }

      const contentType = response.headers.get('Content-Type');
      if (contentType && contentType.includes('application/json')) {
        return await response.json();
      }

      return response.text() as unknown as T;
    } catch (error) {
      if (error instanceof ApiError) {
        throw error;
      }
      
      if (error instanceof TypeError && error.message.includes('fetch')) {
        throw new ApiError('Network error', 0, 'NETWORK_ERROR');
      }
      
      throw new ApiError('Unknown error', 0, 'UNKNOWN_ERROR');
    }
  }

  // Authentication endpoints
  async login(credentials: LoginRequest): Promise<LoginResponse> {
    return this.makeRequest<LoginResponse>('/auth/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
    });
  }

  async logout(): Promise<void> {
    await this.makeRequest<void>('/auth/logout', {
      method: 'POST',
    });
    this.token = null;
  }

  async refreshToken(refreshToken: string): Promise<LoginResponse> {
    return this.makeRequest<LoginResponse>('/auth/refresh', {
      method: 'POST',
      body: JSON.stringify({ refreshToken }),
    });
  }

  // User endpoints
  async getCurrentUser(): Promise<User> {
    return this.makeRequest<User>('/users/me');
  }

  async getUsers(page = 1, limit = 10): Promise<PaginatedResponse<User>> {
    return this.makeRequest<PaginatedResponse<User>>(
      `/users?page=${page}&limit=${limit}`
    );
  }

  async getUserById(id: string): Promise<User> {
    return this.makeRequest<User>(`/users/${id}`);
  }

  async updateUser(id: string, updates: Partial<User>): Promise<User> {
    return this.makeRequest<User>(`/users/${id}`, {
      method: 'PATCH',
      body: JSON.stringify(updates),
    });
  }

  async deleteUser(id: string): Promise<void> {
    return this.makeRequest<void>(`/users/${id}`, {
      method: 'DELETE',
    });
  }

  // Product endpoints
  async getProducts(
    page = 1,
    limit = 10,
    category?: string,
    search?: string
  ): Promise<PaginatedResponse<Product>> {
    const params = new URLSearchParams({
      page: page.toString(),
      limit: limit.toString(),
    });

    if (category) params.append('category', category);
    if (search) params.append('search', search);

    return this.makeRequest<PaginatedResponse<Product>>(`/products?${params}`);
  }

  async getProductById(id: string): Promise<Product> {
    return this.makeRequest<Product>(`/products/${id}`);
  }

  async createProduct(product: CreateProductRequest): Promise<Product> {
    return this.makeRequest<Product>('/products', {
      method: 'POST',
      body: JSON.stringify(product),
    });
  }

  async updateProduct(product: UpdateProductRequest): Promise<Product> {
    const { id, ...updates } = product;
    return this.makeRequest<Product>(`/products/${id}`, {
      method: 'PATCH',
      body: JSON.stringify(updates),
    });
  }

  async deleteProduct(id: string): Promise<void> {
    return this.makeRequest<void>(`/products/${id}`, {
      method: 'DELETE',
    });
  }

  // Order endpoints
  async getOrders(page = 1, limit = 10): Promise<PaginatedResponse<Order>> {
    return this.makeRequest<PaginatedResponse<Order>>(
      `/orders?page=${page}&limit=${limit}`
    );
  }

  async getOrderById(id: string): Promise<Order> {
    return this.makeRequest<Order>(`/orders/${id}`);
  }

  async createOrder(orderData: {
    items: Array<{ productId: string; quantity: number }>;
    shippingAddress: Address;
  }): Promise<Order> {
    return this.makeRequest<Order>('/orders', {
      method: 'POST',
      body: JSON.stringify(orderData),
    });
  }

  async updateOrderStatus(
    id: string,
    status: Order['status']
  ): Promise<Order> {
    return this.makeRequest<Order>(`/orders/${id}/status`, {
      method: 'PATCH',
      body: JSON.stringify({ status }),
    });
  }

  async cancelOrder(id: string): Promise<Order> {
    return this.makeRequest<Order>(`/orders/${id}/cancel`, {
      method: 'POST',
    });
  }
}

// Custom ApiError class
class ApiError extends Error {
  constructor(
    message: string,
    public statusCode: number,
    public code: string,
    public details?: any
  ) {
    super(message);
    this.name = 'ApiError';
  }
}

// Hook for API operations with comprehensive error handling
interface UseApiOptions {
  immediate?: boolean;
  retries?: number;
  retryDelay?: number;
  onSuccess?: (data: any) => void;
  onError?: (error: ApiError) => void;
}

interface UseApiResult<T> {
  data: T | null;
  loading: boolean;
  error: ApiError | null;
  execute: (...args: any[]) => Promise<T>;
  reset: () => void;
}

const useApi = <T>(
  apiCall: (...args: any[]) => Promise<T>,
  options: UseApiOptions = {}
): UseApiResult<T> => {
  const {
    immediate = false,
    retries = 0,
    retryDelay = 1000,
    onSuccess,
    onError
  } = options;

  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(immediate);
  const [error, setError] = useState<ApiError | null>(null);

  const execute = useCallback(
    async (...args: any[]): Promise<T> => {
      setLoading(true);
      setError(null);

      let lastError: ApiError;
      
      for (let attempt = 0; attempt <= retries; attempt++) {
        try {
          const result = await apiCall(...args);
          setData(result);
          setLoading(false);
          
          if (onSuccess) {
            onSuccess(result);
          }
          
          return result;
        } catch (err) {
          lastError = err instanceof ApiError ? err : new ApiError(
            'Unknown error',
            0,
            'UNKNOWN_ERROR'
          );

          if (attempt < retries) {
            await new Promise(resolve => setTimeout(resolve, retryDelay));
          }
        }
      }

      setError(lastError!);
      setLoading(false);
      
      if (onError) {
        onError(lastError!);
      }
      
      throw lastError!;
    },
    [apiCall, retries, retryDelay, onSuccess, onError]
  );

  const reset = useCallback(() => {
    setData(null);
    setLoading(false);
    setError(null);
  }, []);

  useEffect(() => {
    if (immediate) {
      execute();
    }
  }, [immediate, execute]);

  return {
    data,
    loading,
    error,
    execute,
    reset
  };
};

// Mock data for testing
const mockUsers: User[] = [
  {
    id: 'user-1',
    name: 'John Doe',
    email: '[email protected]',
    isActive: true,
    role: 'user',
    createdAt: '2023-01-01T00:00:00Z',
    updatedAt: '2023-01-01T00:00:00Z'
  },
  {
    id: 'user-2',
    name: 'Jane Smith',
    email: '[email protected]',
    avatar: 'https://example.com/avatar2.jpg',
    isActive: true,
    role: 'admin',
    createdAt: '2023-01-02T00:00:00Z',
    updatedAt: '2023-01-02T00:00:00Z'
  },
  {
    id: 'user-3',
    name: 'Bob Johnson',
    email: '[email protected]',
    isActive: false,
    role: 'moderator',
    createdAt: '2023-01-03T00:00:00Z',
    updatedAt: '2023-01-03T00:00:00Z'
  }
];

const mockProducts: Product[] = [
  {
    id: 'product-1',
    name: 'Wireless Headphones',
    price: 99.99,
    description: 'High-quality wireless headphones with noise cancellation',
    category: 'electronics',
    inStock: true,
    stockCount: 50,
    imageUrl: 'https://example.com/headphones.jpg',
    tags: ['audio', 'wireless', 'electronics'],
    createdAt: '2023-01-01T00:00:00Z'
  },
  {
    id: 'product-2',
    name: 'Smartphone',
    price: 699.99,
    description: 'Latest smartphone with advanced features',
    category: 'electronics',
    inStock: true,
    stockCount: 25,
    imageUrl: 'https://example.com/smartphone.jpg',
    tags: ['mobile', 'electronics', 'communication'],
    createdAt: '2023-01-02T00:00:00Z'
  },
  {
    id: 'product-3',
    name: 'Coffee Mug',
    price: 15.99,
    description: 'Ceramic coffee mug with ergonomic handle',
    category: 'home',
    inStock: false,
    stockCount: 0,
    imageUrl: 'https://example.com/mug.jpg',
    tags: ['kitchen', 'ceramic', 'home'],
    createdAt: '2023-01-03T00:00:00Z'
  }
];

const mockOrders: Order[] = [
  {
    id: 'order-1',
    userId: 'user-1',
    items: [
      {
        productId: 'product-1',
        quantity: 2,
        price: 99.99
      }
    ],
    total: 199.98,
    status: 'delivered',
    shippingAddress: {
      street: '123 Main St',
      city: 'New York',
      state: 'NY',
      zipCode: '10001',
      country: 'USA'
    },
    createdAt: '2023-01-01T00:00:00Z',
    updatedAt: '2023-01-05T00:00:00Z'
  }
];

// MSW request handlers
const handlers = [
  // Authentication endpoints
  rest.post('https://api.example.com/auth/login', (req, res, ctx) => {
    const { email, password } = req.body as LoginRequest;
    
    if (email === '[email protected]' && password === 'password123') {
      const user = mockUsers[0];
      return res(
        ctx.status(200),
        ctx.json<LoginResponse>({
          user,
          token: 'mock-jwt-token',
          refreshToken: 'mock-refresh-token',
          expiresIn: 3600
        })
      );
    }
    
    if (email === '[email protected]') {
      return res(
        ctx.status(401),
        ctx.json({
          message: 'Invalid credentials',
          code: 'INVALID_CREDENTIALS'
        })
      );
    }
    
    if (email === '[email protected]') {
      return res(
        ctx.status(423),
        ctx.json({
          message: 'Account locked',
          code: 'ACCOUNT_LOCKED'
        })
      );
    }
    
    return res(
      ctx.status(400),
      ctx.json({
        message: 'Invalid request data',
        code: 'VALIDATION_ERROR',
        field: 'email'
      })
    );
  }),

  rest.post('https://api.example.com/auth/logout', (req, res, ctx) => {
    const authHeader = req.headers.get('Authorization');
    
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
      return res(
        ctx.status(401),
        ctx.json({
          message: 'Unauthorized',
          code: 'UNAUTHORIZED'
        })
      );
    }
    
    return res(ctx.status(200));
  }),

  rest.post('https://api.example.com/auth/refresh', (req, res, ctx) => {
    const { refreshToken } = req.body as { refreshToken: string };
    
    if (refreshToken === 'mock-refresh-token') {
      const user = mockUsers[0];
      return res(
        ctx.status(200),
        ctx.json<LoginResponse>({
          user,
          token: 'new-mock-jwt-token',
          refreshToken: 'new-mock-refresh-token',
          expiresIn: 3600
        })
      );
    }
    
    return res(
      ctx.status(401),
      ctx.json({
        message: 'Invalid refresh token',
        code: 'INVALID_REFRESH_TOKEN'
      })
    );
  }),

  // User endpoints
  rest.get('https://api.example.com/users/me', (req, res, ctx) => {
    const authHeader = req.headers.get('Authorization');
    
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
      return res(
        ctx.status(401),
        ctx.json({
          message: 'Unauthorized',
          code: 'UNAUTHORIZED'
        })
      );
    }
    
    return res(
      ctx.status(200),
      ctx.json<User>(mockUsers[0])
    );
  }),

  rest.get('https://api.example.com/users', (req, res, ctx) => {
    const page = Number(req.url.searchParams.get('page')) || 1;
    const limit = Number(req.url.searchParams.get('limit')) || 10;
    
    const startIndex = (page - 1) * limit;
    const endIndex = startIndex + limit;
    const paginatedUsers = mockUsers.slice(startIndex, endIndex);
    
    return res(
      ctx.status(200),
      ctx.json<PaginatedResponse<User>>({
        data: paginatedUsers,
        pagination: {
          page,
          limit,
          total: mockUsers.length,
          totalPages: Math.ceil(mockUsers.length / limit)
        }
      })
    );
  }),

  rest.get('https://api.example.com/users/:id', (req, res, ctx) => {
    const { id } = req.params;
    const user = mockUsers.find(u => u.id === id);
    
    if (!user) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'User not found',
          code: 'USER_NOT_FOUND'
        })
      );
    }
    
    return res(
      ctx.status(200),
      ctx.json<User>(user)
    );
  }),

  rest.patch('https://api.example.com/users/:id', (req, res, ctx) => {
    const { id } = req.params;
    const updates = req.body as Partial<User>;
    const userIndex = mockUsers.findIndex(u => u.id === id);
    
    if (userIndex === -1) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'User not found',
          code: 'USER_NOT_FOUND'
        })
      );
    }
    
    const updatedUser = { ...mockUsers[userIndex], ...updates, updatedAt: new Date().toISOString() };
    mockUsers[userIndex] = updatedUser;
    
    return res(
      ctx.status(200),
      ctx.json<User>(updatedUser)
    );
  }),

  rest.delete('https://api.example.com/users/:id', (req, res, ctx) => {
    const { id } = req.params;
    const userIndex = mockUsers.findIndex(u => u.id === id);
    
    if (userIndex === -1) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'User not found',
          code: 'USER_NOT_FOUND'
        })
      );
    }
    
    if (id === 'user-1') {
      return res(
        ctx.status(403),
        ctx.json({
          message: 'Cannot delete admin user',
          code: 'FORBIDDEN'
        })
      );
    }
    
    mockUsers.splice(userIndex, 1);
    
    return res(ctx.status(204));
  }),

  // Product endpoints
  rest.get('https://api.example.com/products', (req, res, ctx) => {
    const page = Number(req.url.searchParams.get('page')) || 1;
    const limit = Number(req.url.searchParams.get('limit')) || 10;
    const category = req.url.searchParams.get('category');
    const search = req.url.searchParams.get('search');
    
    let filteredProducts = mockProducts;
    
    if (category) {
      filteredProducts = filteredProducts.filter(p => p.category === category);
    }
    
    if (search) {
      const searchLower = search.toLowerCase();
      filteredProducts = filteredProducts.filter(p =>
        p.name.toLowerCase().includes(searchLower) ||
        p.description.toLowerCase().includes(searchLower) ||
        p.tags.some(tag => tag.toLowerCase().includes(searchLower))
      );
    }
    
    const startIndex = (page - 1) * limit;
    const endIndex = startIndex + limit;
    const paginatedProducts = filteredProducts.slice(startIndex, endIndex);
    
    return res(
      ctx.status(200),
      ctx.json<PaginatedResponse<Product>>({
        data: paginatedProducts,
        pagination: {
          page,
          limit,
          total: filteredProducts.length,
          totalPages: Math.ceil(filteredProducts.length / limit)
        }
      })
    );
  }),

  rest.get('https://api.example.com/products/:id', (req, res, ctx) => {
    const { id } = req.params;
    
    // Simulate slow network for testing
    if (id === 'slow-product') {
      return res(
        ctx.delay(2000),
        ctx.status(200),
        ctx.json<Product>({
          ...mockProducts[0],
          id: 'slow-product',
          name: 'Slow Loading Product'
        })
      );
    }
    
    const product = mockProducts.find(p => p.id === id);
    
    if (!product) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'Product not found',
          code: 'PRODUCT_NOT_FOUND'
        })
      );
    }
    
    return res(
      ctx.status(200),
      ctx.json<Product>(product)
    );
  }),

  rest.post('https://api.example.com/products', (req, res, ctx) => {
    const productData = req.body as CreateProductRequest;
    
    if (!productData.name || productData.name.length < 3) {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Product name must be at least 3 characters',
          code: 'VALIDATION_ERROR',
          field: 'name'
        })
      );
    }
    
    if (productData.price <= 0) {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Product price must be greater than 0',
          code: 'VALIDATION_ERROR',
          field: 'price'
        })
      );
    }
    
    const newProduct: Product = {
      id: `product-${Date.now()}`,
      ...productData,
      inStock: productData.stockCount > 0,
      createdAt: new Date().toISOString()
    };
    
    mockProducts.push(newProduct);
    
    return res(
      ctx.status(201),
      ctx.json<Product>(newProduct)
    );
  }),

  rest.patch('https://api.example.com/products/:id', (req, res, ctx) => {
    const { id } = req.params;
    const updates = req.body as Partial<CreateProductRequest>;
    const productIndex = mockProducts.findIndex(p => p.id === id);
    
    if (productIndex === -1) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'Product not found',
          code: 'PRODUCT_NOT_FOUND'
        })
      );
    }
    
    if (updates.price !== undefined && updates.price <= 0) {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Product price must be greater than 0',
          code: 'VALIDATION_ERROR',
          field: 'price'
        })
      );
    }
    
    const updatedProduct = {
      ...mockProducts[productIndex],
      ...updates,
      inStock: updates.stockCount !== undefined ? updates.stockCount > 0 : mockProducts[productIndex].inStock
    };
    
    mockProducts[productIndex] = updatedProduct;
    
    return res(
      ctx.status(200),
      ctx.json<Product>(updatedProduct)
    );
  }),

  rest.delete('https://api.example.com/products/:id', (req, res, ctx) => {
    const { id } = req.params;
    const productIndex = mockProducts.findIndex(p => p.id === id);
    
    if (productIndex === -1) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'Product not found',
          code: 'PRODUCT_NOT_FOUND'
        })
      );
    }
    
    mockProducts.splice(productIndex, 1);
    
    return res(ctx.status(204));
  }),

  // Order endpoints
  rest.get('https://api.example.com/orders', (req, res, ctx) => {
    const page = Number(req.url.searchParams.get('page')) || 1;
    const limit = Number(req.url.searchParams.get('limit')) || 10;
    
    const startIndex = (page - 1) * limit;
    const endIndex = startIndex + limit;
    const paginatedOrders = mockOrders.slice(startIndex, endIndex);
    
    return res(
      ctx.status(200),
      ctx.json<PaginatedResponse<Order>>({
        data: paginatedOrders,
        pagination: {
          page,
          limit,
          total: mockOrders.length,
          totalPages: Math.ceil(mockOrders.length / limit)
        }
      })
    );
  }),

  rest.get('https://api.example.com/orders/:id', (req, res, ctx) => {
    const { id } = req.params;
    const order = mockOrders.find(o => o.id === id);
    
    if (!order) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'Order not found',
          code: 'ORDER_NOT_FOUND'
        })
      );
    }
    
    return res(
      ctx.status(200),
      ctx.json<Order>(order)
    );
  }),

  rest.post('https://api.example.com/orders', (req, res, ctx) => {
    const orderData = req.body as {
      items: Array<{ productId: string; quantity: number }>;
      shippingAddress: Address;
    };
    
    if (!orderData.items || orderData.items.length === 0) {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Order must have at least one item',
          code: 'VALIDATION_ERROR',
          field: 'items'
        })
      );
    }
    
    const invalidProduct = orderData.items.find(item => 
      !mockProducts.find(p => p.id === item.productId)
    );
    
    if (invalidProduct) {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Invalid product in order',
          code: 'INVALID_PRODUCT',
          details: { productId: invalidProduct.productId }
        })
      );
    }
    
    const orderItems: OrderItem[] = orderData.items.map(item => {
      const product = mockProducts.find(p => p.id === item.productId)!;
      return {
        productId: item.productId,
        quantity: item.quantity,
        price: product.price,
        product
      };
    });
    
    const total = orderItems.reduce(
      (sum, item) => sum + (item.price * item.quantity),
      0
    );
    
    const newOrder: Order = {
      id: `order-${Date.now()}`,
      userId: 'user-1',
      items: orderItems,
      total,
      status: 'pending',
      shippingAddress: orderData.shippingAddress,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    };
    
    mockOrders.push(newOrder);
    
    return res(
      ctx.status(201),
      ctx.json<Order>(newOrder)
    );
  }),

  rest.patch('https://api.example.com/orders/:id/status', (req, res, ctx) => {
    const { id } = req.params;
    const { status } = req.body as { status: Order['status'] };
    const orderIndex = mockOrders.findIndex(o => o.id === id);
    
    if (orderIndex === -1) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'Order not found',
          code: 'ORDER_NOT_FOUND'
        })
      );
    }
    
    const currentOrder = mockOrders[orderIndex];
    
    if (currentOrder.status === 'delivered' && status !== 'delivered') {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Cannot change status of delivered order',
          code: 'INVALID_STATUS_CHANGE'
        })
      );
    }
    
    const updatedOrder = {
      ...currentOrder,
      status,
      updatedAt: new Date().toISOString()
    };
    
    mockOrders[orderIndex] = updatedOrder;
    
    return res(
      ctx.status(200),
      ctx.json<Order>(updatedOrder)
    );
  }),

  rest.post('https://api.example.com/orders/:id/cancel', (req, res, ctx) => {
    const { id } = req.params;
    const orderIndex = mockOrders.findIndex(o => o.id === id);
    
    if (orderIndex === -1) {
      return res(
        ctx.status(404),
        ctx.json({
          message: 'Order not found',
          code: 'ORDER_NOT_FOUND'
        })
      );
    }
    
    const currentOrder = mockOrders[orderIndex];
    
    if (['shipped', 'delivered'].includes(currentOrder.status)) {
      return res(
        ctx.status(400),
        ctx.json({
          message: 'Cannot cancel shipped or delivered order',
          code: 'CANNOT_CANCEL_ORDER'
        })
      );
    }
    
    const cancelledOrder = {
      ...currentOrder,
      status: 'cancelled' as const,
      updatedAt: new Date().toISOString()
    };
    
    mockOrders[orderIndex] = cancelledOrder;
    
    return res(
      ctx.status(200),
      ctx.json<Order>(cancelledOrder)
    );
  }),

  // Network error simulation
  rest.get('https://api.example.com/network-error', (req, res, ctx) => {
    return res.networkError('Failed to connect');
  }),

  // Server error simulation
  rest.get('https://api.example.com/server-error', (req, res, ctx) => {
    return res(
      ctx.status(500),
      ctx.json({
        message: 'Internal server error',
        code: 'INTERNAL_SERVER_ERROR'
      })
    );
  }),

  // Timeout simulation
  rest.get('https://api.example.com/timeout', (req, res, ctx) => {
    return res(
      ctx.delay(5000),
      ctx.status(200),
      ctx.json({ message: 'This will timeout' })
    );
  })
];

// Test server setup
const server = setupServer(...handlers);

export { server, ApiService, useApi, mockUsers, mockProducts, mockOrders };

🧪 Basic API Testing Patterns

🔧 Setting Up MSW Test Environment

Learn to configure MSW for comprehensive API testing with proper setup and teardown.

// 🎯 Comprehensive MSW test setup and configuration

// Test setup file (setupTests.ts)
import { server } from './mocks/server';
import '@testing-library/jest-dom';

// Enable API mocking before all tests
beforeAll(() => {
  server.listen({
    onUnhandledRequest: 'error' // Fail if any unhandled requests
  });
});

// Reset any runtime request handlers between tests
afterEach(() => {
  server.resetHandlers();
});

// Clean up after all tests are finished
afterAll(() => {
  server.close();
});

// Basic API service testing
describe('ApiService', () => {
  let apiService: ApiService;

  beforeEach(() => {
    apiService = new ApiService();
  });

  describe('Authentication', () => {
    it('should login successfully with valid credentials', async () => {
      const credentials: LoginRequest = {
        email: '[email protected]',
        password: 'password123'
      };

      const result = await apiService.login(credentials);

      expect(result).toEqual({
        user: expect.objectContaining({
          id: 'user-1',
          name: 'John Doe',
          email: '[email protected]',
          isActive: true,
          role: 'user'
        }),
        token: 'mock-jwt-token',
        refreshToken: 'mock-refresh-token',
        expiresIn: 3600
      });
    });

    it('should throw error for invalid credentials', async () => {
      const credentials: LoginRequest = {
        email: '[email protected]',
        password: 'wrongpassword'
      };

      await expect(apiService.login(credentials)).rejects.toThrow(
        new ApiError('Invalid credentials', 401, 'INVALID_CREDENTIALS')
      );
    });

    it('should handle account locked error', async () => {
      const credentials: LoginRequest = {
        email: '[email protected]',
        password: 'password123'
      };

      await expect(apiService.login(credentials)).rejects.toThrow(
        new ApiError('Account locked', 423, 'ACCOUNT_LOCKED')
      );
    });

    it('should handle validation errors', async () => {
      const credentials: LoginRequest = {
        email: 'invalid-email',
        password: 'password123'
      };

      await expect(apiService.login(credentials)).rejects.toThrow(
        new ApiError('Invalid request data', 400, 'VALIDATION_ERROR')
      );
    });

    it('should logout successfully', async () => {
      apiService.setToken('valid-token');

      await expect(apiService.logout()).resolves.toBeUndefined();
      expect(apiService['token']).toBeNull();
    });

    it('should throw error when logging out without token', async () => {
      await expect(apiService.logout()).rejects.toThrow(
        new ApiError('Unauthorized', 401, 'UNAUTHORIZED')
      );
    });

    it('should refresh token successfully', async () => {
      const result = await apiService.refreshToken('mock-refresh-token');

      expect(result).toEqual({
        user: expect.objectContaining({
          id: 'user-1',
          name: 'John Doe'
        }),
        token: 'new-mock-jwt-token',
        refreshToken: 'new-mock-refresh-token',
        expiresIn: 3600
      });
    });

    it('should handle invalid refresh token', async () => {
      await expect(
        apiService.refreshToken('invalid-token')
      ).rejects.toThrow(
        new ApiError('Invalid refresh token', 401, 'INVALID_REFRESH_TOKEN')
      );
    });
  });

  describe('User Operations', () => {
    beforeEach(() => {
      apiService.setToken('valid-token');
    });

    it('should get current user', async () => {
      const user = await apiService.getCurrentUser();

      expect(user).toEqual({
        id: 'user-1',
        name: 'John Doe',
        email: '[email protected]',
        isActive: true,
        role: 'user',
        createdAt: '2023-01-01T00:00:00Z',
        updatedAt: '2023-01-01T00:00:00Z'
      });
    });

    it('should get users with pagination', async () => {
      const result = await apiService.getUsers(1, 2);

      expect(result).toEqual({
        data: expect.arrayContaining([
          expect.objectContaining({
            id: 'user-1',
            name: 'John Doe'
          }),
          expect.objectContaining({
            id: 'user-2',
            name: 'Jane Smith'
          })
        ]),
        pagination: {
          page: 1,
          limit: 2,
          total: 3,
          totalPages: 2
        }
      });
    });

    it('should get user by id', async () => {
      const user = await apiService.getUserById('user-2');

      expect(user).toEqual(
        expect.objectContaining({
          id: 'user-2',
          name: 'Jane Smith',
          email: '[email protected]',
          role: 'admin'
        })
      );
    });

    it('should throw error for non-existent user', async () => {
      await expect(
        apiService.getUserById('non-existent')
      ).rejects.toThrow(
        new ApiError('User not found', 404, 'USER_NOT_FOUND')
      );
    });

    it('should update user successfully', async () => {
      const updates = { name: 'Updated Name', isActive: false };
      const updatedUser = await apiService.updateUser('user-1', updates);

      expect(updatedUser).toEqual(
        expect.objectContaining({
          id: 'user-1',
          name: 'Updated Name',
          isActive: false,
          updatedAt: expect.any(String)
        })
      );
    });

    it('should delete user successfully', async () => {
      await expect(
        apiService.deleteUser('user-3')
      ).resolves.toBeUndefined();
    });

    it('should prevent deletion of admin user', async () => {
      await expect(
        apiService.deleteUser('user-1')
      ).rejects.toThrow(
        new ApiError('Cannot delete admin user', 403, 'FORBIDDEN')
      );
    });
  });

  describe('Product Operations', () => {
    it('should get products with filtering and pagination', async () => {
      const result = await apiService.getProducts(1, 10, 'electronics', 'wireless');

      expect(result.data).toHaveLength(1);
      expect(result.data[0]).toEqual(
        expect.objectContaining({
          name: 'Wireless Headphones',
          category: 'electronics'
        })
      );
      expect(result.pagination).toEqual({
        page: 1,
        limit: 10,
        total: 1,
        totalPages: 1
      });
    });

    it('should get product by id', async () => {
      const product = await apiService.getProductById('product-1');

      expect(product).toEqual(
        expect.objectContaining({
          id: 'product-1',
          name: 'Wireless Headphones',
          price: 99.99,
          category: 'electronics'
        })
      );
    });

    it('should handle slow loading products', async () => {
      const startTime = Date.now();
      const product = await apiService.getProductById('slow-product');
      const endTime = Date.now();

      expect(endTime - startTime).toBeGreaterThanOrEqual(2000);
      expect(product.name).toBe('Slow Loading Product');
    });

    it('should create product successfully', async () => {
      const productData: CreateProductRequest = {
        name: 'New Product',
        price: 49.99,
        description: 'A new test product',
        category: 'test',
        stockCount: 10,
        tags: ['test', 'new']
      };

      const createdProduct = await apiService.createProduct(productData);

      expect(createdProduct).toEqual(
        expect.objectContaining({
          id: expect.stringMatching(/^product-\d+$/),
          name: 'New Product',
          price: 49.99,
          inStock: true,
          createdAt: expect.any(String)
        })
      );
    });

    it('should validate product creation data', async () => {
      const invalidProductData: CreateProductRequest = {
        name: 'AB', // Too short
        price: -10, // Invalid price
        description: 'Invalid product',
        category: 'test',
        stockCount: 5,
        tags: []
      };

      await expect(
        apiService.createProduct(invalidProductData)
      ).rejects.toThrow(
        new ApiError(
          'Product name must be at least 3 characters',
          400,
          'VALIDATION_ERROR'
        )
      );
    });

    it('should update product successfully', async () => {
      const updates: UpdateProductRequest = {
        id: 'product-1',
        name: 'Updated Headphones',
        price: 129.99
      };

      const updatedProduct = await apiService.updateProduct(updates);

      expect(updatedProduct).toEqual(
        expect.objectContaining({
          id: 'product-1',
          name: 'Updated Headphones',
          price: 129.99
        })
      );
    });

    it('should validate product update data', async () => {
      const invalidUpdates: UpdateProductRequest = {
        id: 'product-1',
        price: -50 // Invalid price
      };

      await expect(
        apiService.updateProduct(invalidUpdates)
      ).rejects.toThrow(
        new ApiError(
          'Product price must be greater than 0',
          400,
          'VALIDATION_ERROR'
        )
      );
    });

    it('should delete product successfully', async () => {
      await expect(
        apiService.deleteProduct('product-3')
      ).resolves.toBeUndefined();
    });
  });

  describe('Order Operations', () => {
    it('should create order successfully', async () => {
      const orderData = {
        items: [
          { productId: 'product-1', quantity: 2 },
          { productId: 'product-2', quantity: 1 }
        ],
        shippingAddress: {
          street: '456 Oak St',
          city: 'Los Angeles',
          state: 'CA',
          zipCode: '90210',
          country: 'USA'
        }
      };

      const createdOrder = await apiService.createOrder(orderData);

      expect(createdOrder).toEqual(
        expect.objectContaining({
          id: expect.stringMatching(/^order-\d+$/),
          userId: 'user-1',
          items: expect.arrayContaining([
            expect.objectContaining({
              productId: 'product-1',
              quantity: 2,
              price: 99.99
            }),
            expect.objectContaining({
              productId: 'product-2',
              quantity: 1,
              price: 699.99
            })
          ]),
          total: 899.97, // (99.99 * 2) + 699.99
          status: 'pending'
        })
      );
    });

    it('should validate order items', async () => {
      const invalidOrderData = {
        items: [], // Empty items
        shippingAddress: {
          street: '456 Oak St',
          city: 'Los Angeles',
          state: 'CA',
          zipCode: '90210',
          country: 'USA'
        }
      };

      await expect(
        apiService.createOrder(invalidOrderData)
      ).rejects.toThrow(
        new ApiError(
          'Order must have at least one item',
          400,
          'VALIDATION_ERROR'
        )
      );
    });

    it('should validate product existence in order', async () => {
      const invalidOrderData = {
        items: [
          { productId: 'non-existent-product', quantity: 1 }
        ],
        shippingAddress: {
          street: '456 Oak St',
          city: 'Los Angeles',
          state: 'CA',
          zipCode: '90210',
          country: 'USA'
        }
      };

      await expect(
        apiService.createOrder(invalidOrderData)
      ).rejects.toThrow(
        new ApiError('Invalid product in order', 400, 'INVALID_PRODUCT')
      );
    });

    it('should update order status', async () => {
      const updatedOrder = await apiService.updateOrderStatus(
        'order-1',
        'processing'
      );

      expect(updatedOrder).toEqual(
        expect.objectContaining({
          id: 'order-1',
          status: 'processing',
          updatedAt: expect.any(String)
        })
      );
    });

    it('should prevent invalid status changes', async () => {
      // First update to delivered
      await apiService.updateOrderStatus('order-1', 'delivered');

      // Then try to change back to processing
      await expect(
        apiService.updateOrderStatus('order-1', 'processing')
      ).rejects.toThrow(
        new ApiError(
          'Cannot change status of delivered order',
          400,
          'INVALID_STATUS_CHANGE'
        )
      );
    });

    it('should cancel order successfully', async () => {
      const cancelledOrder = await apiService.cancelOrder('order-1');

      expect(cancelledOrder).toEqual(
        expect.objectContaining({
          id: 'order-1',
          status: 'cancelled'
        })
      );
    });

    it('should prevent cancelling shipped orders', async () => {
      // Update order to shipped status
      await apiService.updateOrderStatus('order-1', 'shipped');

      // Try to cancel shipped order
      await expect(
        apiService.cancelOrder('order-1')
      ).rejects.toThrow(
        new ApiError(
          'Cannot cancel shipped or delivered order',
          400,
          'CANNOT_CANCEL_ORDER'
        )
      );
    });
  });
});