Jest測試React Hooks的自定義Hooks

要使用Jest測試React Hooks的自定義Hooks，你需要遵循以下步驟：

1. 首先，確保你已經安裝了所需的依賴項。在項目根目錄中運行以下命令：

npm install --save-dev jest @testing-library/react-hooks react-test-renderer

2. 在項目根目錄中創建一個名為setupTests.js的文件，并添加以下內容：

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

global.renderHook = renderHook;
global.act = act;
global.render = render;
global.fireEvent = fireEvent;
global.waitFor = waitFor;

這將使得@testing-library/react-hooks和@testing-library/react中的函數在全局范圍內可用。

3. 創建一個名為useCounter.js的文件，其中包含一個簡單的自定義Hook：

import { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return { count, increment, decrement };
};

export default useCounter;

4. 創建一個名為useCounter.test.js的文件，用于編寫針對useCounter Hook的測試：

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

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

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

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

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

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

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

5. 在package.json中添加一個名為test的腳本，如下所示：

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

6. 現在，你可以運行npm test來執行測試。

這就是使用Jest測試React Hooks的自定義Hooks的方法。請注意，這里的示例僅用于演示目的，實際項目中可能需要更復雜的測試用例。