react-hooks/tests/useWindowSize.test.ts

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

describe("useWindowSize", () => {
  it("should update the window size on window resize", async () => {
    const { result } = renderHook(() => useWindowSize());

    const newWidth = 800;
    const newHeight = 600;

    act(() => {
      // Simulate a window resize event
      window.innerWidth = newWidth;
      window.innerHeight = newHeight;

      // Trigger the event manually
      window.dispatchEvent(new Event("resize"));
    });

    await waitFor(() => {
      expect(result.current.windowSize.width).toBe(newWidth);
      expect(result.current.windowSize.height).toBe(newHeight);
    });
  });

  it("should correctly identify the screen size", async () => {
    const { result } = renderHook(() => useWindowSize());

    // Simulate a window size of a mobile device
    act(() => {
      window.innerWidth = 500;
      window.innerHeight = 800;
      window.dispatchEvent(new Event("resize"));
    });

    await waitFor(() => {
      expect(result.current.isMobile).toBe(true);
      expect(result.current.isTablet).toBe(false);
      expect(result.current.isDesktop).toBe(false);
    });

    // Simulate a window size of a tablet device
    act(() => {
      window.innerWidth = 900;
      window.innerHeight = 1200;
      window.dispatchEvent(new Event("resize"));
    });

    await waitFor(() => {
      expect(result.current.isMobile).toBe(false);
      expect(result.current.isTablet).toBe(true);
      expect(result.current.isDesktop).toBe(false);
    });

    // Simulate a window size of a desktop device
    act(() => {
      window.innerWidth = 1200;
      window.innerHeight = 1600;
      window.dispatchEvent(new Event("resize"));
    });

    await waitFor(() => {
      expect(result.current.isMobile).toBe(false);
      expect(result.current.isTablet).toBe(false);
      expect(result.current.isDesktop).toBe(true);
    });
  });
});