Enterprise-CMCS/macpro-mako

View on GitHub
react-app/src/hooks/UseDebounce.test.tsx

Summary

Maintainability
A
0 mins
Test Coverage
A
100%
import { renderHook, act } from "@testing-library/react";
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { useDebounce } from "./useDebounce";

describe("UseDebounce", () => {
  beforeEach(() => {
    vi.useFakeTimers();
  });

  afterEach(() => {
    vi.useRealTimers();
  });
  it("returns initial value immediately", () => {
    const { result } = renderHook(() => useDebounce("start value", 500));
    expect(result.current).toBe("start value");
  });

  it("returns updated value after the specified delay", () => {
    const { result, rerender } = renderHook(
      ({ value, delay }) => useDebounce(value, delay),
      { initialProps: { value: "start value", delay: 500 } },
    );

    expect(result.current).toBe("start value");
    rerender({ value: "new value", delay: 500 });
    expect(result.current).toBe("start value");

    // Ensures that the behavior in your tests matches what happens in the browser
    // more closely by executing pending useEffects before returning
    act(() => {
      vi.advanceTimersByTime(500);
    });

    expect(result.current).toBe("new value");
  });
});