🏪 Testing Redux: Store and Actions

🎯 Introduction

Welcome to the Redux testing command center! 🏪 If testing regular state management were like checking a simple light switch, then testing Redux would be like testing an entire electrical control system - complete with power distribution (store), control panels (actions), circuit breakers (reducers), and automated systems (middleware) that all need to work together flawlessly to power your entire application!

Redux applications involve complex state management with multiple moving parts: action creators, reducers, middleware, async operations, and store subscriptions. Testing these components requires understanding both the individual pieces and how they integrate together to form a cohesive state management system.

By the end of this tutorial, you’ll be a master of Redux testing, capable of thoroughly testing everything from simple synchronous actions to complex async thunks with error handling, retry logic, and optimistic updates. You’ll learn to test Redux in isolation and integration, ensuring your state management is bulletproof. Let’s build some rock-solid Redux tests! 🌟

📚 Understanding Redux Testing Fundamentals

🤔 Why Redux Testing Is Essential

Redux testing ensures predictable state management, proper action handling, and reliable data flow throughout your application.

// 🌟 Setting up comprehensive Redux testing environment

import { configureStore, createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import React from 'react';

// Types for our Redux examples
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'moderator';
  isActive: boolean;
  createdAt: string;
}

interface Todo {
  id: string;
  text: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
  dueDate?: string;
  assignedTo?: string;
}

interface ApiError {
  message: string;
  code: number;
  field?: string;
}

interface PaginationMeta {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
}

// Auth slice for user authentication
interface AuthState {
  user: User | null;
  token: string | null;
  loading: boolean;
  error: string | null;
  loginAttempts: number;
  lastLoginAttempt: string | null;
}

const initialAuthState: AuthState = {
  user: null,
  token: null,
  loading: false,
  error: null,
  loginAttempts: 0,
  lastLoginAttempt: null
};

// Async thunk for login
export const loginUser = createAsyncThunk<
  { user: User; token: string },
  { email: string; password: string },
  { rejectValue: ApiError }
>(
  'auth/loginUser',
  async (credentials, { rejectWithValue }) => {
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(credentials)
      });

      if (!response.ok) {
        const errorData = await response.json();
        return rejectWithValue(errorData);
      }

      const data = await response.json();
      
      // Store token in localStorage
      localStorage.setItem('token', data.token);
      
      return data;
    } catch (error) {
      return rejectWithValue({
        message: 'Network error occurred',
        code: 0
      });
    }
  }
);

// Async thunk for logout
export const logoutUser = createAsyncThunk<
  void,
  void,
  { rejectValue: ApiError }
>(
  'auth/logoutUser',
  async (_, { rejectWithValue }) => {
    try {
      await fetch('/api/auth/logout', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });

      localStorage.removeItem('token');
    } catch (error) {
      return rejectWithValue({
        message: 'Logout failed',
        code: 500
      });
    }
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState: initialAuthState,
  reducers: {
    clearError: (state) => {
      state.error = null;
    },
    resetLoginAttempts: (state) => {
      state.loginAttempts = 0;
      state.lastLoginAttempt = null;
    },
    updateUserProfile: (state, action: PayloadAction<Partial<User>>) => {
      if (state.user) {
        state.user = { ...state.user, ...action.payload };
      }
    },
    setToken: (state, action: PayloadAction<string>) => {
      state.token = action.payload;
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(loginUser.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(loginUser.fulfilled, (state, action) => {
        state.loading = false;
        state.user = action.payload.user;
        state.token = action.payload.token;
        state.error = null;
        state.loginAttempts = 0;
        state.lastLoginAttempt = null;
      })
      .addCase(loginUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload?.message || 'Login failed';
        state.loginAttempts += 1;
        state.lastLoginAttempt = new Date().toISOString();
      })
      .addCase(logoutUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(logoutUser.fulfilled, (state) => {
        state.loading = false;
        state.user = null;
        state.token = null;
        state.error = null;
        state.loginAttempts = 0;
        state.lastLoginAttempt = null;
      })
      .addCase(logoutUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload?.message || 'Logout failed';
      });
  }
});

export const { clearError, resetLoginAttempts, updateUserProfile, setToken } = authSlice.actions;
export const authReducer = authSlice.reducer;

// Todos slice for task management
interface TodosState {
  items: Todo[];
  loading: boolean;
  error: string | null;
  filter: 'all' | 'active' | 'completed';
  sortBy: 'createdAt' | 'priority' | 'dueDate';
  searchQuery: string;
  pagination: PaginationMeta;
}

const initialTodosState: TodosState = {
  items: [],
  loading: false,
  error: null,
  filter: 'all',
  sortBy: 'createdAt',
  searchQuery: '',
  pagination: {
    page: 1,
    limit: 10,
    total: 0,
    totalPages: 0
  }
};

// Async thunk for fetching todos
export const fetchTodos = createAsyncThunk<
  { todos: Todo[]; pagination: PaginationMeta },
  { page?: number; limit?: number; filter?: string },
  { rejectValue: ApiError }
>(
  'todos/fetchTodos',
  async (params = {}, { rejectWithValue }) => {
    try {
      const { page = 1, limit = 10, filter = 'all' } = params;
      const queryParams = new URLSearchParams({
        page: page.toString(),
        limit: limit.toString(),
        filter
      });

      const response = await fetch(`/api/todos?${queryParams}`);

      if (!response.ok) {
        const errorData = await response.json();
        return rejectWithValue(errorData);
      }

      return await response.json();
    } catch (error) {
      return rejectWithValue({
        message: 'Failed to fetch todos',
        code: 500
      });
    }
  }
);

// Async thunk for creating todo
export const createTodo = createAsyncThunk<
  Todo,
  Omit<Todo, 'id'>,
  { rejectValue: ApiError }
>(
  'todos/createTodo',
  async (todoData, { rejectWithValue }) => {
    try {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify(todoData)
      });

      if (!response.ok) {
        const errorData = await response.json();
        return rejectWithValue(errorData);
      }

      return await response.json();
    } catch (error) {
      return rejectWithValue({
        message: 'Failed to create todo',
        code: 500
      });
    }
  }
);

// Async thunk for updating todo
export const updateTodo = createAsyncThunk<
  Todo,
  { id: string; updates: Partial<Todo> },
  { rejectValue: ApiError }
>(
  'todos/updateTodo',
  async ({ id, updates }, { rejectWithValue }) => {
    try {
      const response = await fetch(`/api/todos/${id}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify(updates)
      });

      if (!response.ok) {
        const errorData = await response.json();
        return rejectWithValue(errorData);
      }

      return await response.json();
    } catch (error) {
      return rejectWithValue({
        message: 'Failed to update todo',
        code: 500
      });
    }
  }
);

// Async thunk for deleting todo
export const deleteTodo = createAsyncThunk<
  string,
  string,
  { rejectValue: ApiError }
>(
  'todos/deleteTodo',
  async (id, { rejectWithValue }) => {
    try {
      const response = await fetch(`/api/todos/${id}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });

      if (!response.ok) {
        const errorData = await response.json();
        return rejectWithValue(errorData);
      }

      return id;
    } catch (error) {
      return rejectWithValue({
        message: 'Failed to delete todo',
        code: 500
      });
    }
  }
);

const todosSlice = createSlice({
  name: 'todos',
  initialState: initialTodosState,
  reducers: {
    setFilter: (state, action: PayloadAction<TodosState['filter']>) => {
      state.filter = action.payload;
      state.pagination.page = 1; // Reset to first page when filtering
    },
    setSortBy: (state, action: PayloadAction<TodosState['sortBy']>) => {
      state.sortBy = action.payload;
    },
    setSearchQuery: (state, action: PayloadAction<string>) => {
      state.searchQuery = action.payload;
      state.pagination.page = 1; // Reset to first page when searching
    },
    clearError: (state) => {
      state.error = null;
    },
    toggleTodoCompleted: (state, action: PayloadAction<string>) => {
      const todo = state.items.find(item => item.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    addTodoOptimistic: (state, action: PayloadAction<Todo>) => {
      state.items.unshift(action.payload);
    },
    removeTodoOptimistic: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  },
  extraReducers: (builder) => {
    builder
      // Fetch todos
      .addCase(fetchTodos.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.loading = false;
        state.items = action.payload.todos;
        state.pagination = action.payload.pagination;
        state.error = null;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload?.message || 'Failed to fetch todos';
      })
      // Create todo
      .addCase(createTodo.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(createTodo.fulfilled, (state, action) => {
        state.loading = false;
        // Remove optimistic todo if it exists, add real one
        state.items = state.items.filter(item => item.id !== 'temp-id');
        state.items.unshift(action.payload);
        state.error = null;
      })
      .addCase(createTodo.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload?.message || 'Failed to create todo';
        // Remove optimistic todo
        state.items = state.items.filter(item => item.id !== 'temp-id');
      })
      // Update todo
      .addCase(updateTodo.fulfilled, (state, action) => {
        const index = state.items.findIndex(item => item.id === action.payload.id);
        if (index !== -1) {
          state.items[index] = action.payload;
        }
      })
      .addCase(updateTodo.rejected, (state, action) => {
        state.error = action.payload?.message || 'Failed to update todo';
      })
      // Delete todo
      .addCase(deleteTodo.fulfilled, (state, action) => {
        state.items = state.items.filter(item => item.id !== action.payload);
      })
      .addCase(deleteTodo.rejected, (state, action) => {
        state.error = action.payload?.message || 'Failed to delete todo';
      });
  }
});

export const {
  setFilter,
  setSortBy,
  setSearchQuery,
  clearError: clearTodosError,
  toggleTodoCompleted,
  addTodoOptimistic,
  removeTodoOptimistic
} = todosSlice.actions;

export const todosReducer = todosSlice.reducer;

// Root state type
export interface RootState {
  auth: AuthState;
  todos: TodosState;
}

// Store configuration
export const createTestStore = (preloadedState?: Partial<RootState>) => {
  return configureStore({
    reducer: {
      auth: authReducer,
      todos: todosReducer
    },
    preloadedState,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: ['persist/PERSIST']
        }
      })
  });
};

// Selectors
export const selectUser = (state: RootState) => state.auth.user;
export const selectIsAuthenticated = (state: RootState) => !!state.auth.token;
export const selectAuthLoading = (state: RootState) => state.auth.loading;
export const selectAuthError = (state: RootState) => state.auth.error;

export const selectTodos = (state: RootState) => state.todos.items;
export const selectTodosLoading = (state: RootState) => state.todos.loading;
export const selectTodosError = (state: RootState) => state.todos.error;
export const selectTodosFilter = (state: RootState) => state.todos.filter;

export const selectFilteredTodos = (state: RootState) => {
  const { items, filter, searchQuery } = state.todos;
  
  let filtered = items;
  
  // Apply filter
  switch (filter) {
    case 'active':
      filtered = filtered.filter(todo => !todo.completed);
      break;
    case 'completed':
      filtered = filtered.filter(todo => todo.completed);
      break;
    default:
      // 'all' - no filtering
      break;
  }
  
  // Apply search
  if (searchQuery.trim()) {
    filtered = filtered.filter(todo =>
      todo.text.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }
  
  return filtered;
};

export const selectTodoStats = (state: RootState) => {
  const todos = state.todos.items;
  const total = todos.length;
  const completed = todos.filter(t => t.completed).length;
  const active = total - completed;
  const highPriority = todos.filter(t => t.priority === 'high').length;
  
  return { total, completed, active, highPriority };
};

// Custom middleware for logging
export const loggerMiddleware: any = (store: any) => (next: any) => (action: any) => {
  console.log('Dispatching:', action.type);
  const result = next(action);
  console.log('Next state:', store.getState());
  return result;
};

// Test utilities
export const createMockStore = (initialState: Partial<RootState> = {}) => {
  return createTestStore({
    auth: { ...initialAuthState, ...initialState.auth },
    todos: { ...initialTodosState, ...initialState.todos }
  });
};

export const renderWithRedux = (
  component: React.ReactElement,
  { store = createMockStore(), ...renderOptions } = {}
) => {
  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
    <Provider store={store}>{children}</Provider>
  );
  
  return {
    ...render(component, { wrapper: Wrapper, ...renderOptions }),
    store
  };
};

✅ Testing Actions and Action Creators

🎬 Testing Synchronous Actions

Basic action testing verifies that actions are created correctly with proper types and payloads.

// 🌟 Comprehensive action creator testing

describe('Auth Actions', () => {
  // ✅ Testing synchronous action creators
  describe('Synchronous Actions', () => {
    it('should create clearError action', () => {
      const action = clearError();
      
      expect(action).toEqual({
        type: 'auth/clearError',
        payload: undefined
      });
    });

    it('should create resetLoginAttempts action', () => {
      const action = resetLoginAttempts();
      
      expect(action).toEqual({
        type: 'auth/resetLoginAttempts',
        payload: undefined
      });
    });

    it('should create updateUserProfile action', () => {
      const userUpdate = { name: 'Updated Name', email: '[email protected]' };
      const action = updateUserProfile(userUpdate);
      
      expect(action).toEqual({
        type: 'auth/updateUserProfile',
        payload: userUpdate
      });
    });

    it('should create setToken action', () => {
      const token = 'abc123token';
      const action = setToken(token);
      
      expect(action).toEqual({
        type: 'auth/setToken',
        payload: token
      });
    });
  });

  // ✅ Testing action creators with complex payloads
  describe('Complex Payload Actions', () => {
    it('should handle partial user profile updates', () => {
      const partialUpdate = { name: 'New Name' };
      const action = updateUserProfile(partialUpdate);
      
      expect(action.payload).toEqual(partialUpdate);
      expect(action.type).toBe('auth/updateUserProfile');
    });

    it('should handle empty user profile updates', () => {
      const emptyUpdate = {};
      const action = updateUserProfile(emptyUpdate);
      
      expect(action.payload).toEqual(emptyUpdate);
      expect(action.type).toBe('auth/updateUserProfile');
    });

    it('should handle user profile updates with all fields', () => {
      const fullUpdate: Partial<User> = {
        id: 'user-123',
        name: 'Full Name',
        email: '[email protected]',
        role: 'admin',
        isActive: false,
        createdAt: '2023-01-01T00:00:00Z'
      };
      
      const action = updateUserProfile(fullUpdate);
      
      expect(action.payload).toEqual(fullUpdate);
    });
  });
});

describe('Todos Actions', () => {
  // ✅ Testing todos synchronous actions
  describe('Filter and Search Actions', () => {
    it('should create setFilter action', () => {
      const filter = 'completed';
      const action = setFilter(filter);
      
      expect(action).toEqual({
        type: 'todos/setFilter',
        payload: filter
      });
    });

    it('should create setSortBy action', () => {
      const sortBy = 'priority';
      const action = setSortBy(sortBy);
      
      expect(action).toEqual({
        type: 'todos/setSortBy',
        payload: sortBy
      });
    });

    it('should create setSearchQuery action', () => {
      const searchQuery = 'important task';
      const action = setSearchQuery(searchQuery);
      
      expect(action).toEqual({
        type: 'todos/setSearchQuery',
        payload: searchQuery
      });
    });

    it('should handle all filter types', () => {
      const filters: Array<TodosState['filter']> = ['all', 'active', 'completed'];
      
      filters.forEach(filter => {
        const action = setFilter(filter);
        expect(action.payload).toBe(filter);
        expect(action.type).toBe('todos/setFilter');
      });
    });

    it('should handle all sort types', () => {
      const sortOptions: Array<TodosState['sortBy']> = ['createdAt', 'priority', 'dueDate'];
      
      sortOptions.forEach(sortBy => {
        const action = setSortBy(sortBy);
        expect(action.payload).toBe(sortBy);
        expect(action.type).toBe('todos/setSortBy');
      });
    });
  });

  // ✅ Testing optimistic update actions
  describe('Optimistic Update Actions', () => {
    it('should create addTodoOptimistic action', () => {
      const todo: Todo = {
        id: 'temp-123',
        text: 'Optimistic todo',
        completed: false,
        priority: 'medium'
      };
      
      const action = addTodoOptimistic(todo);
      
      expect(action).toEqual({
        type: 'todos/addTodoOptimistic',
        payload: todo
      });
    });

    it('should create removeTodoOptimistic action', () => {
      const todoId = 'temp-123';
      const action = removeTodoOptimistic(todoId);
      
      expect(action).toEqual({
        type: 'todos/removeTodoOptimistic',
        payload: todoId
      });
    });

    it('should create toggleTodoCompleted action', () => {
      const todoId = 'todo-456';
      const action = toggleTodoCompleted(todoId);
      
      expect(action).toEqual({
        type: 'todos/toggleTodoCompleted',
        payload: todoId
      });
    });
  });
});

// ✅ Testing action types and payloads validation
describe('Action Type Safety', () => {
  it('should have correct action types for auth actions', () => {
    expect(clearError().type).toBe('auth/clearError');
    expect(resetLoginAttempts().type).toBe('auth/resetLoginAttempts');
    expect(updateUserProfile({}).type).toBe('auth/updateUserProfile');
    expect(setToken('').type).toBe('auth/setToken');
  });

  it('should have correct action types for todos actions', () => {
    expect(setFilter('all').type).toBe('todos/setFilter');
    expect(setSortBy('createdAt').type).toBe('todos/setSortBy');
    expect(setSearchQuery('').type).toBe('todos/setSearchQuery');
    expect(clearTodosError().type).toBe('todos/clearError');
    expect(toggleTodoCompleted('').type).toBe('todos/toggleTodoCompleted');
    expect(addTodoOptimistic({} as Todo).type).toBe('todos/addTodoOptimistic');
    expect(removeTodoOptimistic('').type).toBe('todos/removeTodoOptimistic');
  });

  it('should preserve payload types', () => {
    const userUpdate = { name: 'Test User' };
    const action = updateUserProfile(userUpdate);
    
    // TypeScript should ensure these types match
    expect(action.payload.name).toBe('Test User');
    expect(typeof action.payload.name).toBe('string');
  });
});

🔄 Testing Async Thunks

⚡ Testing Async Action Creators

Async thunks require mocking external dependencies and testing various success/failure scenarios.

// 🌟 Comprehensive async thunk testing

describe('loginUser Async Thunk', () => {
  beforeEach(() => {
    global.fetch = jest.fn();
    localStorage.clear();
  });

  afterEach(() => {
    jest.resetAllMocks();
  });

  // ✅ Testing successful login
  it('should handle successful login', async () => {
    const mockResponse = {
      user: {
        id: 'user-123',
        name: 'John Doe',
        email: '[email protected]',
        role: 'user' as const,
        isActive: true,
        createdAt: '2023-01-01T00:00:00Z'
      },
      token: 'abc123token'
    };

    const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
    mockFetch.mockResolvedValue({
      ok: true,
      json: () => Promise.resolve(mockResponse)
    } as Response);

    const credentials = { email: '[email protected]', password: 'password123' };
    
    const dispatch = jest.fn();
    const getState = jest.fn();
    const extra = {};

    const thunk = loginUser(credentials);
    const result = await thunk(dispatch, getState, extra);

    expect(result.type).toBe('auth/loginUser/fulfilled');
    expect(result.payload).toEqual(mockResponse);
    expect(mockFetch).toHaveBeenCalledWith('/api/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(credentials)
    });
    expect(localStorage.getItem('token')).toBe('abc123token');
  });

  // ✅ Testing login failure with API error
  it('should handle login failure with API error', async () => {
    const errorResponse = {
      message: 'Invalid credentials',
      code: 401,
      field: 'email'
    };

    const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
    mockFetch.mockResolvedValue({
      ok: false,
      json: () => Promise.resolve(errorResponse)
    } as Response);

    const credentials = { email: '[email protected]', password: 'wrongpassword' };
    
    const dispatch = jest.fn();
    const getState = jest.fn();
    const extra = {};

    const thunk = loginUser(credentials);
    const result = await thunk(dispatch, getState, extra);

    expect(result.type).toBe('auth/loginUser/rejected');
    expect(result.payload).toEqual(errorResponse);
    expect(localStorage.getItem('token')).toBeNull();
  });

  // ✅ Testing network error
  it('should handle network error', async () => {
    const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
    mockFetch.mockRejectedValue(new Error('Network error'));

    const credentials = { email: '[email protected]', password: 'password123' };
    
    const dispatch = jest.fn();
    const getState = jest.fn();
    const extra = {};

    const thunk = loginUser(credentials);
    const result = await thunk(dispatch, getState, extra);

    expect(result.type).toBe('auth/loginUser/rejected');
    expect(result.payload).toEqual({
      message: 'Network error occurred',
      code: 0
    });
  });
});

describe('logoutUser Async Thunk', () => {
  beforeEach(() => {
    global.fetch = jest.fn();
    localStorage.setItem('token', 'existing-token');
  });

  afterEach(() => {
    jest.resetAllMocks();
    localStorage.clear();
  });

  it('should handle successful logout', async () => {
    const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
    mockFetch.mockResolvedValue({
      ok: true
    } as Response);

    const dispatch = jest.fn();
    const getState = jest.fn();
    const extra = {};

    const thunk = logoutUser();
    const result = await thunk(dispatch, getState, extra);

    expect(result.type).toBe('auth/logoutUser/fulfilled');
    expect(result.payload).toBeUndefined();
    expect(mockFetch).toHaveBeenCalledWith('/api/auth/logout', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer existing-token'
      }
    });
    expect(localStorage.getItem('token')).toBeNull();
  });

  it('should handle logout failure', async () => {
    const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
    mockFetch.mockRejectedValue(new Error('Server error'));

    const dispatch = jest.fn();
    const getState = jest.fn();
    const extra = {};

    const thunk = logoutUser();
    const result = await thunk(dispatch, getState, extra);

    expect(result.type).toBe('auth/logoutUser/rejected');
    expect(result.payload).toEqual({
      message: 'Logout failed',
      code: 500
    });
    expect(localStorage.getItem('token')).toBeNull(); // Token should still be removed
  });
});

describe('Todos Async Thunks', () => {
  beforeEach(() => {
    global.fetch = jest.fn();
    localStorage.setItem('token', 'test-token');
  });

  afterEach(() => {
    jest.resetAllMocks();
  });

  // ✅ Testing fetchTodos
  describe('fetchTodos', () => {
    it('should fetch todos successfully', async () => {
      const mockResponse = {
        todos: [
          {
            id: 'todo-1',
            text: 'First todo',
            completed: false,
            priority: 'high' as const
          },
          {
            id: 'todo-2',
            text: 'Second todo',
            completed: true,
            priority: 'low' as const
          }
        ],
        pagination: {
          page: 1,
          limit: 10,
          total: 2,
          totalPages: 1
        }
      };

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: true,
        json: () => Promise.resolve(mockResponse)
      } as Response);

      const params = { page: 1, limit: 10, filter: 'all' };
      
      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = fetchTodos(params);
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/fetchTodos/fulfilled');
      expect(result.payload).toEqual(mockResponse);
      expect(mockFetch).toHaveBeenCalledWith('/api/todos?page=1&limit=10&filter=all');
    });

    it('should handle fetch todos error', async () => {
      const errorResponse = {
        message: 'Failed to fetch todos',
        code: 500
      };

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: false,
        json: () => Promise.resolve(errorResponse)
      } as Response);

      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = fetchTodos();
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/fetchTodos/rejected');
      expect(result.payload).toEqual(errorResponse);
    });
  });

  // ✅ Testing createTodo
  describe('createTodo', () => {
    it('should create todo successfully', async () => {
      const newTodo = {
        text: 'New todo',
        completed: false,
        priority: 'medium' as const
      };

      const createdTodo = {
        id: 'todo-123',
        ...newTodo
      };

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: true,
        json: () => Promise.resolve(createdTodo)
      } as Response);

      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = createTodo(newTodo);
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/createTodo/fulfilled');
      expect(result.payload).toEqual(createdTodo);
      expect(mockFetch).toHaveBeenCalledWith('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer test-token'
        },
        body: JSON.stringify(newTodo)
      });
    });

    it('should handle create todo validation error', async () => {
      const invalidTodo = {
        text: '',
        completed: false,
        priority: 'medium' as const
      };

      const errorResponse = {
        message: 'Text is required',
        code: 400,
        field: 'text'
      };

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: false,
        json: () => Promise.resolve(errorResponse)
      } as Response);

      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = createTodo(invalidTodo);
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/createTodo/rejected');
      expect(result.payload).toEqual(errorResponse);
    });
  });

  // ✅ Testing updateTodo
  describe('updateTodo', () => {
    it('should update todo successfully', async () => {
      const todoId = 'todo-123';
      const updates = { text: 'Updated todo text', completed: true };
      const updatedTodo = {
        id: todoId,
        text: 'Updated todo text',
        completed: true,
        priority: 'high' as const
      };

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: true,
        json: () => Promise.resolve(updatedTodo)
      } as Response);

      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = updateTodo({ id: todoId, updates });
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/updateTodo/fulfilled');
      expect(result.payload).toEqual(updatedTodo);
      expect(mockFetch).toHaveBeenCalledWith(`/api/todos/${todoId}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer test-token'
        },
        body: JSON.stringify(updates)
      });
    });
  });

  // ✅ Testing deleteTodo
  describe('deleteTodo', () => {
    it('should delete todo successfully', async () => {
      const todoId = 'todo-123';

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: true
      } as Response);

      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = deleteTodo(todoId);
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/deleteTodo/fulfilled');
      expect(result.payload).toBe(todoId);
      expect(mockFetch).toHaveBeenCalledWith(`/api/todos/${todoId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': 'Bearer test-token'
        }
      });
    });

    it('should handle delete todo error', async () => {
      const todoId = 'todo-123';
      const errorResponse = {
        message: 'Todo not found',
        code: 404
      };

      const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
      mockFetch.mockResolvedValue({
        ok: false,
        json: () => Promise.resolve(errorResponse)
      } as Response);

      const dispatch = jest.fn();
      const getState = jest.fn();
      const extra = {};

      const thunk = deleteTodo(todoId);
      const result = await thunk(dispatch, getState, extra);

      expect(result.type).toBe('todos/deleteTodo/rejected');
      expect(result.payload).toEqual(errorResponse);
    });
  });
});

🔧 Testing Reducers

🗂️ Testing State Transitions

Reducers are pure functions that should be tested thoroughly for all possible state transitions.

// 🌟 Comprehensive reducer testing

describe('Auth Reducer', () => {
  // ✅ Testing initial state
  it('should return initial state', () => {
    const state = authReducer(undefined, { type: '@@INIT' } as any);
    
    expect(state).toEqual(initialAuthState);
  });

  // ✅ Testing synchronous actions
  describe('Synchronous Actions', () => {
    it('should handle clearError', () => {
      const previousState: AuthState = {
        ...initialAuthState,
        error: 'Some error'
      };

      const state = authReducer(previousState, clearError());

      expect(state.error).toBeNull();
      expect(state).toEqual({
        ...previousState,
        error: null
      });
    });

    it('should handle resetLoginAttempts', () => {
      const previousState: AuthState = {
        ...initialAuthState,
        loginAttempts: 3,
        lastLoginAttempt: '2023-01-01T00:00:00Z'
      };

      const state = authReducer(previousState, resetLoginAttempts());

      expect(state.loginAttempts).toBe(0);
      expect(state.lastLoginAttempt).toBeNull();
    });

    it('should handle updateUserProfile when user exists', () => {
      const user: User = {
        id: 'user-123',
        name: 'John Doe',
        email: '[email protected]',
        role: 'user',
        isActive: true,
        createdAt: '2023-01-01T00:00:00Z'
      };

      const previousState: AuthState = {
        ...initialAuthState,
        user
      };

      const updates = { name: 'Updated Name', email: '[email protected]' };
      const state = authReducer(previousState, updateUserProfile(updates));

      expect(state.user).toEqual({
        ...user,
        ...updates
      });
    });

    it('should not update user profile when user is null', () => {
      const previousState: AuthState = {
        ...initialAuthState,
        user: null
      };

      const updates = { name: 'Updated Name' };
      const state = authReducer(previousState, updateUserProfile(updates));

      expect(state.user).toBeNull();
      expect(state).toEqual(previousState);
    });

    it('should handle setToken', () => {
      const token = 'new-token-123';
      const state = authReducer(initialAuthState, setToken(token));

      expect(state.token).toBe(token);
    });
  });

  // ✅ Testing async action states
  describe('Login User Async Actions', () => {
    it('should handle loginUser.pending', () => {
      const action = { type: loginUser.pending.type };
      const state = authReducer(initialAuthState, action);

      expect(state.loading).toBe(true);
      expect(state.error).toBeNull();
    });

    it('should handle loginUser.fulfilled', () => {
      const payload = {
        user: {
          id: 'user-123',
          name: 'John Doe',
          email: '[email protected]',
          role: 'user' as const,
          isActive: true,
          createdAt: '2023-01-01T00:00:00Z'
        },
        token: 'auth-token-123'
      };

      const previousState: AuthState = {
        ...initialAuthState,
        loading: true,
        loginAttempts: 2,
        lastLoginAttempt: '2023-01-01T10:00:00Z'
      };

      const action = { type: loginUser.fulfilled.type, payload };
      const state = authReducer(previousState, action);

      expect(state).toEqual({
        ...previousState,
        loading: false,
        user: payload.user,
        token: payload.token,
        error: null,
        loginAttempts: 0,
        lastLoginAttempt: null
      });
    });

    it('should handle loginUser.rejected', () => {
      const payload = {
        message: 'Invalid credentials',
        code: 401
      };

      const previousState: AuthState = {
        ...initialAuthState,
        loading: true,
        loginAttempts: 1
      };

      const action = { type: loginUser.rejected.type, payload };
      const state = authReducer(previousState, action);

      expect(state.loading).toBe(false);
      expect(state.error).toBe('Invalid credentials');
      expect(state.loginAttempts).toBe(2);
      expect(state.lastLoginAttempt).toBeDefined();
      expect(new Date(state.lastLoginAttempt!).getTime()).toBeCloseTo(Date.now(), -3);
    });

    it('should handle loginUser.rejected without payload', () => {
      const previousState: AuthState = {
        ...initialAuthState,
        loading: true
      };

      const action = { type: loginUser.rejected.type, payload: undefined };
      const state = authReducer(previousState, action);

      expect(state.loading).toBe(false);
      expect(state.error).toBe('Login failed');
      expect(state.loginAttempts).toBe(1);
    });
  });

  // ✅ Testing logout actions
  describe('Logout User Async Actions', () => {
    const loggedInState: AuthState = {
      ...initialAuthState,
      user: {
        id: 'user-123',
        name: 'John Doe',
        email: '[email protected]',
        role: 'user',
        isActive: true,
        createdAt: '2023-01-01T00:00:00Z'
      },
      token: 'auth-token-123',
      loginAttempts: 1,
      lastLoginAttempt: '2023-01-01T10:00:00Z'
    };

    it('should handle logoutUser.pending', () => {
      const action = { type: logoutUser.pending.type };
      const state = authReducer(loggedInState, action);

      expect(state.loading).toBe(true);
      // Other state should remain unchanged
      expect(state.user).toBe(loggedInState.user);
      expect(state.token).toBe(loggedInState.token);
    });

    it('should handle logoutUser.fulfilled', () => {
      const action = { type: logoutUser.fulfilled.type };
      const state = authReducer(loggedInState, action);

      expect(state).toEqual({
        loading: false,
        user: null,
        token: null,
        error: null,
        loginAttempts: 0,
        lastLoginAttempt: null
      });
    });

    it('should handle logoutUser.rejected', () => {
      const payload = {
        message: 'Logout failed',
        code: 500
      };

      const action = { type: logoutUser.rejected.type, payload };
      const state = authReducer(loggedInState, action);

      expect(state.loading).toBe(false);
      expect(state.error).toBe('Logout failed');
      // User should remain logged in on logout failure
      expect(state.user).toBe(loggedInState.user);
      expect(state.token).toBe(loggedInState.token);
    });
  });
});

describe('Todos Reducer', () => {
  // ✅ Testing initial state
  it('should return initial state', () => {
    const state = todosReducer(undefined, { type: '@@INIT' } as any);
    
    expect(state).toEqual(initialTodosState);
  });

  // ✅ Testing synchronous actions
  describe('Synchronous Actions', () => {
    it('should handle setFilter', () => {
      const filter = 'completed';
      const previousState = {
        ...initialTodosState,
        pagination: { ...initialTodosState.pagination, page: 3 }
      };

      const state = todosReducer(previousState, setFilter(filter));

      expect(state.filter).toBe(filter);
      expect(state.pagination.page).toBe(1); // Should reset to page 1
    });

    it('should handle setSortBy', () => {
      const sortBy = 'priority';
      const state = todosReducer(initialTodosState, setSortBy(sortBy));

      expect(state.sortBy).toBe(sortBy);
    });

    it('should handle setSearchQuery', () => {
      const searchQuery = 'important task';
      const previousState = {
        ...initialTodosState,
        pagination: { ...initialTodosState.pagination, page: 2 }
      };

      const state = todosReducer(previousState, setSearchQuery(searchQuery));

      expect(state.searchQuery).toBe(searchQuery);
      expect(state.pagination.page).toBe(1); // Should reset to page 1
    });

    it('should handle toggleTodoCompleted for existing todo', () => {
      const todos: Todo[] = [
        {
          id: 'todo-1',
          text: 'First todo',
          completed: false,
          priority: 'medium'
        },
        {
          id: 'todo-2',
          text: 'Second todo',
          completed: true,
          priority: 'high'
        }
      ];

      const previousState = {
        ...initialTodosState,
        items: todos
      };

      const state = todosReducer(previousState, toggleTodoCompleted('todo-1'));

      expect(state.items[0].completed).toBe(true);
      expect(state.items[1].completed).toBe(true); // Should remain unchanged
    });

    it('should handle toggleTodoCompleted for non-existing todo', () => {
      const todos: Todo[] = [
        {
          id: 'todo-1',
          text: 'First todo',
          completed: false,
          priority: 'medium'
        }
      ];

      const previousState = {
        ...initialTodosState,
        items: todos
      };

      const state = todosReducer(previousState, toggleTodoCompleted('non-existing'));

      expect(state.items).toEqual(todos); // Should remain unchanged
    });

    it('should handle addTodoOptimistic', () => {
      const newTodo: Todo = {
        id: 'temp-123',
        text: 'Optimistic todo',
        completed: false,
        priority: 'low'
      };

      const state = todosReducer(initialTodosState, addTodoOptimistic(newTodo));

      expect(state.items).toHaveLength(1);
      expect(state.items[0]).toEqual(newTodo);
    });

    it('should handle removeTodoOptimistic', () => {
      const todos: Todo[] = [
        {
          id: 'temp-123',
          text: 'Temp todo',
          completed: false,
          priority: 'medium'
        },
        {
          id: 'real-456',
          text: 'Real todo',
          completed: false,
          priority: 'high'
        }
      ];

      const previousState = {
        ...initialTodosState,
        items: todos
      };

      const state = todosReducer(previousState, removeTodoOptimistic('temp-123'));

      expect(state.items).toHaveLength(1);
      expect(state.items[0].id).toBe('real-456');
    });
  });

  // ✅ Testing async actions
  describe('Fetch Todos Async Actions', () => {
    it('should handle fetchTodos.pending', () => {
      const action = { type: fetchTodos.pending.type };
      const state = todosReducer(initialTodosState, action);

      expect(state.loading).toBe(true);
      expect(state.error).toBeNull();
    });

    it('should handle fetchTodos.fulfilled', () => {
      const payload = {
        todos: [
          {
            id: 'todo-1',
            text: 'First todo',
            completed: false,
            priority: 'high' as const
          },
          {
            id: 'todo-2',
            text: 'Second todo',
            completed: true,
            priority: 'low' as const
          }
        ],
        pagination: {
          page: 1,
          limit: 10,
          total: 2,
          totalPages: 1
        }
      };

      const action = { type: fetchTodos.fulfilled.type, payload };
      const state = todosReducer(initialTodosState, action);

      expect(state.loading).toBe(false);
      expect(state.items).toEqual(payload.todos);
      expect(state.pagination).toEqual(payload.pagination);
      expect(state.error).toBeNull();
    });

    it('should handle fetchTodos.rejected', () => {
      const payload = {
        message: 'Failed to fetch todos',
        code: 500
      };

      const action = { type: fetchTodos.rejected.type, payload };
      const state = todosReducer(initialTodosState, action);

      expect(state.loading).toBe(false);
      expect(state.error).toBe('Failed to fetch todos');
    });
  });

  // ✅ Testing create/update/delete actions
  describe('CRUD Async Actions', () => {
    const existingTodos: Todo[] = [
      {
        id: 'todo-1',
        text: 'Existing todo',
        completed: false,
        priority: 'medium'
      }
    ];

    it('should handle createTodo.fulfilled', () => {
      const newTodo: Todo = {
        id: 'todo-2',
        text: 'New todo',
        completed: false,
        priority: 'high'
      };

      const previousState = {
        ...initialTodosState,
        items: [...existingTodos, { id: 'temp-id', text: 'Temp', completed: false, priority: 'low' as const }],
        loading: true
      };

      const action = { type: createTodo.fulfilled.type, payload: newTodo };
      const state = todosReducer(previousState, action);

      expect(state.loading).toBe(false);
      expect(state.error).toBeNull();
      expect(state.items).toHaveLength(2);
      expect(state.items[0]).toEqual(newTodo); // New todo should be first
      expect(state.items[1]).toEqual(existingTodos[0]);
      expect(state.items.some(item => item.id === 'temp-id')).toBe(false); // Temp should be removed
    });

    it('should handle updateTodo.fulfilled', () => {
      const updatedTodo: Todo = {
        id: 'todo-1',
        text: 'Updated todo',
        completed: true,
        priority: 'high'
      };

      const previousState = {
        ...initialTodosState,
        items: existingTodos
      };

      const action = { type: updateTodo.fulfilled.type, payload: updatedTodo };
      const state = todosReducer(previousState, action);

      expect(state.items).toHaveLength(1);
      expect(state.items[0]).toEqual(updatedTodo);
    });

    it('should handle deleteTodo.fulfilled', () => {
      const previousState = {
        ...initialTodosState,
        items: existingTodos
      };

      const action = { type: deleteTodo.fulfilled.type, payload: 'todo-1' };
      const state = todosReducer(previousState, action);

      expect(state.items).toHaveLength(0);
    });
  });
});