Jest測(cè)試React Hooks的方法

Jest 是一個(gè)流行的 JavaScript 測(cè)試框架，可以與 React Hooks 一起使用來進(jìn)行組件和功能的單元測(cè)試

1. 安裝依賴： 確保已經(jīng)安裝了 Jest 和相關(guān)的 React 測(cè)試庫(kù)。如果尚未安裝，請(qǐng)運(yùn)行以下命令：

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

2. 配置 Jest： 在項(xiàng)目根目錄中創(chuàng)建或修改 jest.config.js 文件，添加以下內(nèi)容：

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

3. 編寫測(cè)試用例： 假設(shè)有一個(gè)名為 useCounter.js 的自定義 Hooks 文件，內(nèi)容如下：

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 編寫測(cè)試用例 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. 運(yùn)行測(cè)試： 在 package.json 中添加一個(gè)名為 test 的腳本：

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

然后運(yùn)行 npm test，Jest 將自動(dòng)查找并運(yùn)行所有測(cè)試用例。

這只是一個(gè)簡(jiǎn)單的示例，實(shí)際上你可以根據(jù)需要編寫更復(fù)雜的測(cè)試用例來覆蓋各種場(chǎng)景。記住始終確保在執(zhí)行任何副作用（例如 API 調(diào)用）之前使用 act() 函數(shù)包裝操作。