Khóa học Frontend NextJS + React

// Ví dụ cơ bản với jest.fn()
describe('Basic Mock Function', () => {
  it('should be callable and track calls', () => {
    const mockFunc = jest.fn();

    mockFunc('first call', 123);
    mockFunc('second call');

    // Kiểm tra xem hàm có được gọi hay không
    expect(mockFunc).toHaveBeenCalled();

    // Kiểm tra số lần gọi
    expect(mockFunc).toHaveBeenCalledTimes(2);

    // Kiểm tra đối số của lần gọi gần nhất
    expect(mockFunc).toHaveBeenCalledWith('second call');

    // Kiểm tra đối số của một lần gọi cụ thể
    expect(mockFunc).toHaveBeenNthCalledWith(1, 'first call', 123);
  });
});

// Ví dụ cấu hình mock function
describe('Configuring Mock Function', () => {
  it('should return specified values', () => {
    const mockFunc = jest.fn();

    // Cấu hình giá trị trả về
    mockFunc.mockReturnValue('default value');
    mockFunc.mockReturnValueOnce('first value');
    mockFunc.mockReturnValueOnce('second value');

    expect(mockFunc()).toBe('first value');
    expect(mockFunc()).toBe('second value');
    expect(mockFunc()).toBe('default value'); // Sau khi hết các giá trị Once, nó quay lại giá trị default
  });

  it('should use specified implementation', () => {
    const mockFunc = jest.fn();

    // Cấu hình implementation giả
    mockFunc.mockImplementation((a: number, b: number) => a + b);

    expect(mockFunc(2, 3)).toBe(5);
  });

  it('should handle async return values', async () => {
    const mockAsyncFunc = jest.fn();

    // Cấu hình trả về Promise đã resolved
    mockAsyncFunc.mockResolvedValue({ data: 'fake data' });

    const result = await mockAsyncFunc();
    expect(result).toEqual({ data: 'fake data' });

    // Cấu hình trả về Promise bị rejected
    mockAsyncFunc.mockRejectedValue(new Error('API failed'));

    await expect(mockAsyncFunc()).rejects.toThrow('API failed');
  });
});

// Giả sử bạn có một file apiService.ts như sau:
// src/apiService.ts
export const getUsers = async () => {
  console.log('Calling real API: /api/users');
  // Logic gọi API thực tế ở đây
  const res = await fetch('/api/users');
  if (!res.ok) throw new Error('Failed to fetch users');
  return res.json();
};

export const createUser = async (user: any) => {
  console.log('Calling real API: /api/users POST');
  // Logic gọi API thực tế
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user),
  });
  if (!res.ok) throw new Error('Failed to create user');
  return res.json();
};

// Bây giờ, test một component sử dụng apiService:
// src/components/UserList.tsx
import { useEffect, useState } from 'react';
import { getUsers } from '../apiService'; // Component phụ thuộc vào getUsers

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

  useEffect(() => {
    const loadUsers = async () => {
      try {
        setLoading(true);
        const data = await getUsers(); // Lời gọi hàm cần mock
        setUsers(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    loadUsers();
  }, []); // Chú ý dependency array rỗng, chỉ chạy 1 lần khi mount

  if (loading) return <div>Loading users...</div>;
  if (error) return <div>Error: {error}</div>;
  if (users.length === 0) return <div>No users found.</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

// File test cho component UserList:
// src/components/UserList.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom'; // Import matcher cho DOM
import UserList from './UserList';
// Import hàm gốc để có thể cast nó sang kiểu jest.Mock
import { getUsers } from '../apiService';

// 1. Mock toàn bộ module apiService trước khi import component cần test
// Jest sẽ hoist (đưa lên đầu) lời gọi jest.mock()
jest.mock('../apiService');

// 2. Ép kiểu hàm gốc đã import thành kiểu jest.Mock để truy cập các phương thức mock
const mockedGetUsers = getUsers as jest.Mock;

describe('UserList Component', () => {
  // Đảm bảo reset mock sau mỗi test case để chúng độc lập
  beforeEach(() => {
    mockedGetUsers.mockClear();
  });

  it('should display loading state initially', () => {
    // Cấu hình mock để nó *chưa* resolve ngay lập tức
    // Điều này cần thiết nếu bạn muốn test trạng thái loading
    // Tuy nhiên, thường thì ta sẽ cấu hình mockResolvedValue ngay.
    // Cách đơn giản nhất là mock ResolvedValue:
     mockedGetUsers.mockResolvedValue([]); // Provide a default mock value

    render(<UserList />);

    // React Testing Library xử lý bất đồng bộ khá tốt với findBy...
    // Ban đầu component render, trạng thái loading là true
    expect(screen.getByText('Loading users...')).toBeInTheDocument();
  });


  it('should render list of users after fetching', async () => {
    // Dữ liệu giả mà mock function sẽ trả về
    const dummyUsers = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

    // Cấu hình mock function getUsers để trả về dữ liệu giả khi được gọi
    mockedGetUsers.mockResolvedValue(dummyUsers);

    // Render component
    render(<UserList />);

    // Kiểm tra xem hàm getUsers đã được gọi chưa
    expect(mockedGetUsers).toHaveBeenCalledTimes(1);

    // Chờ cho đến khi dữ liệu được load và hiển thị (sử dụng findBy để chờ bất đồng bộ)
    await waitFor(() => {
        expect(screen.getByText('Alice')).toBeInTheDocument();
        expect(screen.getByText('Bob')).toBeInTheDocument();
    });

    // Đảm bảo trạng thái loading không còn hiển thị
    expect(screen.queryByText('Loading users...')).not.toBeInTheDocument();
    // Đảm bảo thông báo rỗng không hiển thị
    expect(screen.queryByText('No users found.')).not.toBeInTheDocument();
  });

  it('should display error message if fetching fails', async () => {
    // Cấu hình mock function getUsers để trả về lỗi khi được gọi
    mockedGetUsers.mockRejectedValue(new Error('Network Error'));

    // Render component
    render(<UserList />);

    // Kiểm tra xem hàm getUsers đã được gọi chưa
    expect(mockedGetUsers).toHaveBeenCalledTimes(1);

    // Chờ cho đến khi thông báo lỗi hiển thị
    await waitFor(() => {
        expect(screen.getByText('Error: Network Error')).toBeInTheDocument();
    });

    // Đảm bảo trạng thái loading không còn hiển thị
    expect(screen.queryByText('Loading users...')).not.toBeInTheDocument();
  });

  it('should display "No users found" if fetch returns empty array', async () => {
    // Cấu hình mock function getUsers để trả về mảng rỗng
    mockedGetUsers.mockResolvedValue([]);

    // Render component
    render(<UserList />);

    // Kiểm tra xem hàm getUsers đã được gọi chưa
    expect(mockedGetUsers).toHaveBeenCalledTimes(1);

    // Chờ cho đến khi thông báo "No users found" hiển thị
    await waitFor(() => {
        expect(screen.getByText('No users found.')).toBeInTheDocument();
    });

    // Đảm bảo các trạng thái khác không hiển thị
    expect(screen.queryByText('Loading users...')).not.toBeInTheDocument();
    expect(screen.queryByText('Error:')).not.toBeInTheDocument();
  });
});

// Ví dụ Mocking fetch API
describe('Mocking Global Fetch', () => {
  const mockFetch = jest.fn();
  const originalFetch = global.fetch; // Lưu lại hàm fetch gốc nếu muốn khôi phục sau

  // Thay thế global fetch bằng mock function trước mỗi test
  beforeEach(() => {
    global.fetch = mockFetch as any; // Ép kiểu để TypeScript không báo lỗi
    // Reset cấu hình mock sau mỗi test
    mockFetch.mockClear();
  });

  // Khôi phục hàm fetch gốc sau tất cả các test (tùy chọn)
  afterAll(() => {
     global.fetch = originalFetch;
  });


  it('should call fetch with correct URL', async () => {
    // Cấu hình mock fetch để trả về response giả
    mockFetch.mockResolvedValue({
      ok: true,
      json: () => Promise.resolve({ message: 'success' }),
    });

    // Giả sử bạn có một hàm util gọi fetch
    async function getData(url: string) {
      const res = await fetch(url);
      if (!res.ok) throw new Error('Fetch failed');
      return res.json();
    }

    await getData('/api/some-data');

    expect(mockFetch).toHaveBeenCalledTimes(1);
    expect(mockFetch).toHaveBeenCalledWith('/api/some-data');
  });

  it('should handle fetch errors', async () => {
    // Cấu hình mock fetch để trả về lỗi
    mockFetch.mockResolvedValue({
      ok: false, // isOk = false
      status: 500,
      statusText: 'Internal Server Error',
    });

    async function getData(url: string) {
        const res = await fetch(url);
        if (!res.ok) throw new Error('Fetch failed'); // Hàm này sẽ throw lỗi
        return res.json();
    }

    await expect(getData('/api/error-data')).rejects.toThrow('Fetch failed');
    expect(mockFetch).toHaveBeenCalledTimes(1);
  });
});

// Ví dụ Mocking localStorage
describe('Mocking Global localStorage', () => {
    const localStorageMock = {
        getItem: jest.fn(),
        setItem: jest.fn(),
        clear: jest.fn(),
        removeItem: jest.fn(),
        length: 0, // Thêm các thuộc tính khác nếu cần
        key: jest.fn(),
    };

    const originalLocalStorage = Object.getOwnPropertyDescriptor(window, 'localStorage');

    beforeEach(() => {
        // Thay thế localStorage trên đối tượng window bằng mock object
        Object.defineProperty(window, 'localStorage', {
            value: localStorageMock,
            writable: true, // Cho phép ghi đè nếu cần thiết
            configurable: true, // Cho phép defineProperty lại hoặc xóa
        });
        // Reset mock function trong localStorageMock
        localStorageMock.getItem.mockClear();
        localStorageMock.setItem.mockClear();
        localStorageMock.clear.mockClear();
        localStorageMock.removeItem.mockClear();
        localStorageMock.key.mockClear();
    });

    afterEach(() => {
        // Khôi phục localStorage gốc sau mỗi test (quan trọng!)
        if (originalLocalStorage) {
             Object.defineProperty(window, 'localStorage', originalLocalStorage);
        } else {
             // Nếu localStorage gốc không tồn tại, xóa thuộc tính
             delete (window as any).localStorage;
        }
    });

    it('should call localStorage.setItem when saving data', () => {
        function saveData(key: string, value: string) {
            localStorage.setItem(key, value);
        }

        saveData('userPref', 'darkMode');

        expect(localStorageMock.setItem).toHaveBeenCalledTimes(1);
        expect(localStorageMock.setItem).toHaveBeenCalledWith('userPref', 'darkMode');
    });

    it('should call localStorage.getItem when loading data', () => {
        localStorageMock.getItem.mockReturnValue('lightMode'); // Cấu hình giá trị trả về

        function loadData(key: string): string | null {
            return localStorage.getItem(key);
        }

        const pref = loadData('userPref');

        expect(localStorageMock.getItem).toHaveBeenCalledTimes(1);
        expect(localStorageMock.getItem).toHaveBeenCalledWith('userPref');
        expect(pref).toBe('lightMode');
    });
});

// Giả sử bạn có một custom hook useAuth.ts:
// src/hooks/useAuth.ts
import { useState, useEffect, createContext, useContext } from 'react';

interface AuthContextType {
  user: { id: number; name: string } | null;
  login: (username: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
}

// Giả định một Context (thực tế có thể dùng Context hoặc không)
const AuthContext = createContext<AuthContextType | undefined>(undefined);

// Giả định hook sử dụng context hoặc gọi API
export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    // Fallback hoặc logic mặc định nếu không dùng Context Provider
    const [user, setUser] = useState<{ id: number; name: string } | null>(null);

    // Logic gọi API login/logout
    const login = async (username: string, password: string) => {
        // Logic gọi API login thật
        console.log('Real login API called');
        return new Promise<void>(resolve => {
            setTimeout(() => {
                setUser({ id: 1, name: username });
                resolve();
            }, 500); // Simulate async operation
        });
    };
     const logout = async () => {
        // Logic gọi API logout thật
         console.log('Real logout API called');
        return new Promise<void>(resolve => {
            setTimeout(() => {
                setUser(null);
                resolve();
            }, 300); // Simulate async operation
        });
    };

    useEffect(() => {
        // Logic kiểm tra session ban đầu
        console.log('Checking initial session');
        // Đây cũng là chỗ cần mock nếu nó gọi API hoặc localStorage
    }, []);

    return { user, login, logout };
  }
  return context; // Sử dụng context nếu có
};


// Component sử dụng hook useAuth:
// src/components/Profile.tsx
import { useAuth } from '../hooks/useAuth'; // Component phụ thuộc vào useAuth

function Profile() {
  const { user, logout } = useAuth(); // Sử dụng hook

  if (!user) {
    return <div>Please log in to view your profile.</div>;
  }

  return (
    <div>
      <h2>Welcome, {user.name}!</h2>
      <button onClick={() => logout()}>Logout</button> {/* Sử dụng hàm từ hook */}
    </div>
  );
}

export default Profile;

// File test cho component Profile:
// src/components/Profile.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Profile from './Profile';
import { useAuth } from '../hooks/useAuth'; // Import hook gốc

// Mock module chứa hook useAuth
jest.mock('../hooks/useAuth');

// Ép kiểu hook gốc đã import thành jest.Mock
const mockedUseAuth = useAuth as jest.Mock;

describe('Profile Component', () => {
    // Đảm bảo reset mock sau mỗi test case
    beforeEach(() => {
        mockedUseAuth.mockClear();
    });

    it('should display login message when user is not logged in', () => {
        // Cấu hình hook mock để trả về trạng thái chưa login
        mockedUseAuth.mockReturnValue({
            user: null,
            login: jest.fn(), // Mock các hàm khác cũng là best practice
            logout: jest.fn(),
        });

        render(<Profile />);

        expect(screen.getByText('Please log in to view your profile.')).toBeInTheDocument();
        expect(screen.queryByText(/Welcome,/)).not.toBeInTheDocument(); // Đảm bảo thông báo welcome không xuất hiện
    });

    it('should display welcome message and logout button when user is logged in', () => {
        const dummyUser = { id: 1, name: 'Test User' };

        // Cấu hình hook mock để trả về trạng thái đã login
        mockedUseAuth.mockReturnValue({
            user: dummyUser,
            login: jest.fn(),
            logout: jest.fn(), // Tạo mock function cho logout
        });

        render(<Profile />);

        expect(screen.getByText(`Welcome, ${dummyUser.name}!`)).toBeInTheDocument();
        const logoutButton = screen.getByRole('button', { name: 'Logout' });
        expect(logoutButton).toBeInTheDocument();

        // Kiểm tra xem hàm logout có được gọi khi click button không
        fireEvent.click(logoutButton);
        expect(mockedUseAuth().logout).toHaveBeenCalledTimes(1);
    });
});