Khóa học Frontend NextJS + React

import { renderHook, act } from '@testing-library/react-hooks';

// ... hook cần test ...

test('tên bài kiểm thử hook', () => {
  // Render hook
  const { result, rerender, unmount } = renderHook(() => tenHook(propsBanDau));

  // result.current chứa giá trị trả về hiện tại của hook
  // ... kiểm tra state ban đầu ...

  // act() được sử dụng để wrap các hành động thay đổi state/gây side effects
  act(() => {
    // Gọi hàm từ hook để thay đổi state
    result.current[1](giaTriMoi); // Ví dụ cho useState [state, setState]
  });

  // ... kiểm tra state sau khi thay đổi ...

  // rerender(newProps) để test khi props thay đổi
  // unmount() để test cleanup effects (useEffect)
});

// hooks/useCounter.js
import { useState, useCallback } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const decrement = useCallback(() => {
    setCount(prevCount => prevCount - 1);
  }, []);

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]); // initialValue là dependency

  return { count, increment, decrement, reset };
};

export default useCounter;

// hooks/useCounter.test.js
import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('useCounter should initialize with default or provided value', () => {
  // Test default value
  const { result: resultDefault } = renderHook(() => useCounter());
  expect(resultDefault.current.count).toBe(0);

  // Test provided initial value
  const { result: resultInitial } = renderHook(() => useCounter(10));
  expect(resultInitial.current.count).toBe(10);
});

test('useCounter should increment the count', () => {
  const { result } = renderHook(() => useCounter(5)); // Start from 5

  expect(result.current.count).toBe(5);

  // Use act() for state updates
  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(6); // Check after increment

  act(() => {
    result.current.increment();
    result.current.increment();
  });

  expect(result.current.count).toBe(8); // Check after multiple increments
});

test('useCounter should decrement the count', () => {
  const { result } = renderHook(() => useCounter(5));

  act(() => {
    result.current.decrement();
  });

  expect(result.current.count).toBe(4);

  act(() => {
    result.current.decrement();
    result.current.decrement();
  });

  expect(result.current.count).toBe(2);
});

test('useCounter should reset the count to initial value', () => {
  const { result } = renderHook(() => useCounter(10));

  act(() => {
    result.current.increment();
    result.current.increment();
  });
  expect(result.current.count).toBe(12); // Change the state

  act(() => {
    result.current.reset();
  });

  expect(result.current.count).toBe(10); // Reset to initial (10)
});

test('useCounter should reset to new initial value if props change', () => {
    const { result, rerender } = renderHook(({ initialValue }) => useCounter(initialValue), {
      initialProps: { initialValue: 0 },
    });

    expect(result.current.count).toBe(0);

    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(1);

    // Rerender with new initialValue
    rerender({ initialValue: 100 });

    // The counter state is preserved by default
    expect(result.current.count).toBe(1);

    // Reset should now use the new initialValue
    act(() => {
      result.current.reset();
    });
    expect(result.current.count).toBe(100);
});

// hooks/useFetch.js
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null); // Reset error on new fetch
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    if (url) { // Only fetch if url is provided
       fetchData();
    } else {
       setLoading(false); // If no URL, not loading
       setData(null);
       setError(null);
    }


  }, [url]); // Re-run effect if URL changes

  return { data, loading, error };
};

export default useFetch;

// hooks/useFetch.test.js
import { renderHook, waitFor } from '@testing-library/react-hooks';
import useFetch from './useFetch';

// Mock the global fetch function
const mockFetch = (data, ok = true, status = 200) =>
  jest.fn(() =>
    Promise.resolve({
      ok,
      status,
      json: () => Promise.resolve(data),
    })
  );

const mockErrorFetch = (error, ok = false, status = 500) =>
  jest.fn(() =>
    Promise.resolve({
      ok,
      status,
      json: () => Promise.reject(error), // Or handle error body if needed
    })
  );


describe('useFetch', () => {
  beforeEach(() => {
    // Reset mocks before each test
    global.fetch = jest.fn();
  });

  afterEach(() => {
    // Clean up mocks
    jest.resetAllMocks();
  });

  test('should fetch data successfully', async () => {
    const dummyData = { id: 1, name: 'Test Item' };
    global.fetch = mockFetch(dummyData); // Set up the mock

    const url = 'https://example.com/api/items/1';
    const { result, rerender } = renderHook(() => useFetch(url));

    // Initial state
    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBeNull();
    expect(result.current.error).toBeNull();

    // Wait for the async operation (fetch) to complete and state to update
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
      expect(result.current.data).toEqual(dummyData);
      expect(result.current.error).toBeNull();
    });

    // Verify fetch was called with the correct URL
    expect(global.fetch).toHaveBeenCalledWith(url);
    expect(global.fetch).toHaveBeenCalledTimes(1);

    // Test fetching with a new URL
    const dummyData2 = { id: 2, name: 'Another Item' };
    global.fetch = mockFetch(dummyData2); // Set up mock for the new fetch
    const newUrl = 'https://example.com/api/items/2';

    // Rerender hook with new URL, which should trigger new effect
    rerender(newUrl);

    // State should go back to loading initially (depending on hook logic)
    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBeNull(); // Data might reset or not, depends on hook impl.

    // Wait for the second fetch to complete
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
      expect(result.current.data).toEqual(dummyData2);
      expect(result.current.error).toBeNull();
    });

    // Verify fetch was called again with the new URL
    expect(global.fetch).toHaveBeenCalledWith(newUrl);
    expect(global.fetch).toHaveBeenCalledTimes(2); // Total calls

  });

  test('should handle fetch error', async () => {
    const fetchError = new Error('Failed to fetch');
    global.fetch = mockErrorFetch(fetchError); // Set up error mock

    const url = 'https://example.com/api/error';
    const { result } = renderHook(() => useFetch(url));

    // Initial state
    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBeNull();
    expect(result.current.error).toBeNull();

    // Wait for the async operation to complete (and fail)
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
      expect(result.current.data).toBeNull();
      expect(result.current.error).toEqual(expect.any(Error)); // Check if error is an Error object
      // Or specific error message if needed: expect(result.current.error.message).toBe('Failed to fetch');
    });

    expect(global.fetch).toHaveBeenCalledWith(url);
    expect(global.fetch).toHaveBeenCalledTimes(1);
  });

   test('should not fetch if url is null or undefined', () => {
      const { result } = renderHook(() => useFetch(null)); // Test with null URL

      expect(global.fetch).not.toHaveBeenCalled(); // Fetch should not be called
      expect(result.current.loading).toBe(false); // Should not be loading
      expect(result.current.data).toBeNull();
      expect(result.current.error).toBeNull();
   });
});

// UserContext.js (Lặp lại để tiện theo dõi)
import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext({ name: 'Guest', setName: () => {} });

const UserProvider = ({ children }) => {
  const [name, setName] = useState('Default User'); // Giá trị mặc định thực tế
  return (
    <UserContext.Provider value={{ name, setName }}>
      {children}
    </UserContext.Provider>
  );
};

const useUser = () => useContext(UserContext);

export { UserContext, UserProvider, useUser };

// MyComponent.js (Component tiêu thụ Context)
import React from 'react';
import { useUser } from './UserContext';

const MyComponent = () => {
  const { name, setName } = useUser(); // Lấy name và setName từ context

  return (
    <div>
      <h1>Xin chào, {name}!</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Nhập tên của bạn"
      />
    </div>
  );
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
import { UserProvider } from './UserContext'; // Import the real provider

test('MyComponent displays default user name from Provider and updates on input', async () => {
  render(
    // Wrap the component with the necessary Provider
    <UserProvider>
      <MyComponent />
    </UserProvider>
  );

  // Check if the default name from Provider is displayed initially
  expect(screen.getByText('Xin chào, Default User!')).toBeInTheDocument();
  const inputElement = screen.getByPlaceholderText('Nhập tên của bạn');
  expect(inputElement).toHaveValue('Default User'); // Input reflects context state

  // Simulate user typing into the input
  const newName = 'Alice';
  fireEvent.change(inputElement, { target: { value: newName } });

  // Wait for state update and re-render (fireEvent is usually wrapped in act internally by RTL)
   // We can directly check the updated state shown in the UI
  expect(screen.getByText(`Xin chào, ${newName}!`)).toBeInTheDocument();
  expect(inputElement).toHaveValue(newName);
});

test('MyComponent uses default context value if no Provider is present (not recommended)', () => {
  // Test without wrapping in Provider - relies on the default value in createContext
  // This test is mainly for understanding, typically you'd ensure Provider is always used
  render(<MyComponent />);

  // Check if the default value from createContext is used
  // Note: The default value in createContext is used *only* when the component
  // is rendered *outside* of a matching Provider.
  expect(screen.getByText('Xin chào, Guest!')).toBeInTheDocument(); // 'Guest' is the default in createContext
  const inputElement = screen.getByPlaceholderText('Nhập tên của bạn');
  expect(inputElement).toHaveValue('Guest'); // Input reflects context state
  // Cannot test state updates easily here as the default context value is static.
});


// Alternative: Mocking Context Value
test('MyComponent displays mocked user name when using a mocked Provider wrapper', () => {
    // This is useful if the real Provider is complex or has side effects.
    // We create a simple mock wrapper that provides specific context values.
    const MockUserProvider = ({ children }) => {
        const mockValue = { name: 'Mock User', setName: jest.fn() };
        return (
          <UserContext.Provider value={mockValue}>
            {children}
          </UserContext.Provider>
        );
    };

    render(
        <MockUserProvider>
            <MyComponent />
        </MockUserProvider>
    );

    expect(screen.getByText('Xin chào, Mock User!')).toBeInTheDocument();
    const inputElement = screen.getByPlaceholderText('Nhập tên của bạn');
    expect(inputElement).toHaveValue('Mock User');

    // We can even test if the mocked setName function was called
    const setNameMock = screen.getByText('Xin chào, Mock User!').closest('div').querySelector('input')._wrapperState.initialValue.setName; // This is a bit hacky way to get the mock function in testing. A better way is to pass the mock value directly in render.
    // Let's use a cleaner approach by passing the mock value to the render context directly if needed,
    // or simply testing the output based on the mocked value. Testing the mock itself is less common
    // unless you're testing the Provider's logic. The main goal here is testing the *consumer*.

    // Cleaner way to test with mocked context value:
    render(
      <UserContext.Provider value={{ name: 'Another Mock', setName: jest.fn() }}>
         <MyComponent />
      </UserContext.Provider>
    );
    expect(screen.getByText('Xin chào, Another Mock!')).toBeInTheDocument();
});

// hooks/useUser.test.js (Kiểm thử hook useUser)
import { renderHook, act } from '@testing-library/react-hooks';
import { useUser, UserProvider, UserContext } from './UserContext'; // Import hook VÀ Provider/Context

test('useUser hook returns context value when wrapped with Provider', () => {
  // Sử dụng UserProvider thực tế làm wrapper cho renderHook
  const { result } = renderHook(() => useUser(), {
    wrapper: UserProvider, // Chỉ định Provider làm wrapper
  });

  // Kiểm tra giá trị ban đầu được cung cấp bởi UserProvider
  const { name, setName } = result.current;
  expect(name).toBe('Default User');
  expect(typeof setName).toBe('function');
});

test('useUser hook throws error when used outside of Provider', () => {
    // Jest will capture console.error for expected React warnings/errors
    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

    // renderHook does not automatically wrap in act if there's an error
    // We expect the hook to throw when useContext cannot find a Provider
    expect(() => {
       renderHook(() => useUser()); // Render without wrapper
    }).toThrow(/useContext can only be called inside of the top level of a React function component or custom Hook./);
    // The error message might vary slightly depending on React/Jest version.
    // It might also be a different error if you used createContext(null) initially.

    consoleErrorSpy.mockRestore(); // Restore console.error
});


test('useUser hook returns mocked context value when using a mocked Provider wrapper', () => {
    const mockValue = { name: 'Mocked Name', setName: jest.fn() };

    // Create a simple wrapper using the Context.Provider directly
    const MockWrapper = ({ children }) => (
        <UserContext.Provider value={mockValue}>
            {children}
        </UserContext.Provider>
    );

    const { result } = renderHook(() => useUser(), {
        wrapper: MockWrapper, // Sử dụng wrapper mock
    });

    // Kiểm tra giá trị được trả về từ mock value
    const { name, setName } = result.current;
    expect(name).toBe('Mocked Name');
    expect(setName).toBe(mockValue.setName); // Kiểm tra xem có phải cùng function mock không

    // Optional: Test calling the function returned by the hook
    act(() => {
      setName('New Name'); // Call the mocked function
    });

    expect(mockValue.setName).toHaveBeenCalledWith('New Name'); // Verify the mock function was called
});

// UserContext.test.js (Kiểm thử Provider)
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { UserProvider, UserContext } from './UserContext'; // Import Provider VÀ Context

test('UserProvider provides initial value and updates it via the provided function', async () => {
    // Để kiểm thử Provider, chúng ta cần một cách để "nhìn vào" giá trị context được cung cấp.
    // Một cách là render một component con đơn giản chỉ hiển thị giá trị context.
    const ConsumerComponent = () => {
        const { name, setName } = React.useContext(UserContext);
        return (
            <div>
                <span data-testid="user-name">{name}</span>
                <button onClick={() => setName('Updated User')}>Update Name</button>
            </div>
        );
    };

    render(
        <UserProvider>
            <ConsumerComponent />
        </UserProvider>
    );

    // Check initial state provided by UserProvider
    expect(screen.getByTestId('user-name')).toHaveTextContent('Default User');
    const updateButton = screen.getByText('Update Name');

    // Simulate user clicking the button to update state via the context function
    fireEvent.click(updateButton);

    // Wait for state update and re-render
    await screen.findByText('Updated User'); // Wait until 'Updated User' appears

    // Check the updated state reflected in the UI
    expect(screen.getByTestId('user-name')).toHaveTextContent('Updated User');
});