Charonyu's Profile

開始寫useWindowSize的測試吧

這篇應該比較簡單，應該大概可以自己寫出來了吧

我認為困難的點可能是如何模擬窗口

下面開始講解是怎麼模擬的

let resizeWindow = (x: number, y: number) => { ... };: 這是一個箭頭函數，接受兩個參數，x 和 y，代表窗口的新寬度和高度。

window.innerWidth = x;: 這行設定 window 物件的 innerWidth 屬性為 x。這會模擬改變瀏覽器窗口的寬度。

window.innerHeight = y;: 這行設定 window 物件的 innerHeight 屬性為 y。這會模擬改變瀏覽器窗口的高度。

window.dispatchEvent(new Event("resize"));: 這行會觸發一個名為 "resize" 的新事件。這會模擬用戶調整窗口大小時瀏覽器會觸發的 resize 事件，也就是我們在useEffect 監聽的resize事件。


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

describe("useWindowSize", () => {
  // 用於模擬窗口大小的物件
  let resizeWindow = (x: number, y: number) => {
    window.innerWidth = x;
    window.innerHeight = y;
    window.dispatchEvent(new Event("resize"));
  };

	// 應該要回傳正確的窗口大小
  it("should return window size", () => {
    // 初始化窗口大小
    resizeWindow(800, 600);

    const { result } = renderHook(() => useWindowSize());
    expect(result.current.width).toBe(800);
    expect(result.current.height).toBe(600);
  });

	// 調整大小後應該要回傳正確的窗口大小
  it("should update size when window is resized", () => {
    // 初始化窗口大小
    resizeWindow(800, 600);
    const { result } = renderHook(() => useWindowSize());

    act(() => {
      // 改變窗口大小
      resizeWindow(1024, 768);
    });

    expect(result.current.width).toBe(1024);
    expect(result.current.height).toBe(768);
  });
});

[Day 9] 寫useWindowSize測試