Jest測試React Hooks的方法

Jest 是一個流行的 JavaScript 測試框架，可以與 React Hooks 一起使用來進行組件和功能的單元測試

1. 安裝依賴： 確保已經安裝了 Jest 和相關的 React 測試庫。如果尚未安裝，請運行以下命令：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

2. 配置 Jest： 在項目根目錄中創建或修改 jest.config.js 文件，添加以下內容：

module.exports = {
  preset: "react",
  testEnvironment: "jsdom",
};

3. 編寫測試用例： 假設有一個名為 useCounter.js 的自定義 Hooks 文件，內容如下：

import { useState } from "react";

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

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

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

  return { count, increment, decrement };
};

export default useCounter;

為此 Hooks 編寫測試用例 useCounter.test.js：

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

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

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

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

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

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

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

4. 運行測試： 在 package.json 中添加一個名為 test 的腳本：

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

然后運行 npm test，Jest 將自動查找并運行所有測試用例。

這只是一個簡單的示例，實際上你可以根據需要編寫更復雜的測試用例來覆蓋各種場景。記住始終確保在執行任何副作用（例如 API 調用）之前使用 act() 函數包裝操作。