Jest測試React Hooks的useState與useEffect結合

要使用Jest測試React Hooks中的useState和useEffect結合，你需要使用@testing-library/react-hooks庫。首先，確保你已經安裝了這個庫：

npm install --save @testing-library/react-hooks

接下來，創建一個包含useState和useEffect的自定義Hooks函數。例如，我們創建一個名為useCounter的Hooks，它將在組件掛載時設置一個計數器，并在每次更新時遞增計數器：

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

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

  useEffect(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return count;
};

export default useCounter;

現在，我們將使用@testing-library/react-hooks庫來測試這個Hooks：

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

describe('useCounter', () => {
  it('should increment counter on mount', () => {
    const { result } = renderHook(() => useCounter(0));

    expect(result.current).toBe(1);
  });

  it('should increment counter when called twice', () => {
    const { result, rerender } = renderHook(() => useCounter(0));

    act(() => {
      rerender();
    });

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

在這個測試中，我們首先測試了當組件掛載時，計數器是否會遞增。然后，我們測試了當Hooks被重新渲染時，計數器是否會繼續遞增。

要運行這個測試，確保你的項目中有一個測試運行器（如Jest），并運行相應的測試命令。例如，如果你使用的是Jest，可以在package.json中添加以下腳本：

{
  "scripts": {
    "test": "jest"
  }
}

然后在命令行中運行npm test。