開始寫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);
});
});