Jest測試React Hooks副作用

Jest 是一個流行的 JavaScript 測試框架，可以輕松地測試 React Hooks 中的副作用。在 React 中，副作用通常是指那些會導致組件狀態發生變化或與外部環境交互的操作，例如數據獲取、訂閱或手動更改 DOM。

要使用 Jest 測試 React Hooks 的副作用，你需要：

1. 安裝必要的依賴項：確保已安裝 @testing-library/react、@testing-library/react-hooks 和 jest。

2. 創建一個測試文件：在你的項目中創建一個新的測試文件，例如 useMyHook.test.js。

3. 編寫測試用例：使用 renderHook 函數從 @testing-library/react-hooks 來測試你的自定義 Hook。然后，你可以使用 Jest 的 expect 函數來斷言副作用是否按預期發生。

下面是一個簡單的示例，展示了如何使用 Jest 測試一個自定義 Hook 的副作用：

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return [count, setCount];
};

export default useCounter;

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

describe('useCounter', () => {
  it('should update the document title when the count changes', () => {
    const { result } = renderHook(() => useCounter(0));

    // 初始值
    expect(document.title).toBe('Count: 0');

    // 更新計數器
    act(() => {
      result.current[1](5);
    });

    // 確保文檔標題已更新
    expect(document.title).toBe('Count: 5');
  });
});

在這個示例中，我們測試了 useCounter Hook 的副作用，即當計數值發生變化時，文檔標題應該相應地更新。我們使用 renderHook 函數來渲染我們的 Hook，并使用 act 函數來模擬計數值的更新。然后，我們使用 Jest 的 expect 函數來斷言文檔標題是否按預期更新。