136 lines
4.3 KiB
TypeScript
136 lines
4.3 KiB
TypeScript
import { renderHook, act } from '@testing-library/react';
|
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
|
import { useDebounce } from './useDebounce';
|
|
|
|
describe('useDebounce Hook', () => {
|
|
// Use fake timers to control setTimeout and clearTimeout
|
|
beforeEach(() => {
|
|
vi.useFakeTimers();
|
|
});
|
|
|
|
// Restore real timers after each test
|
|
afterEach(() => {
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
it('should return the initial value immediately on first render', () => {
|
|
const { result } = renderHook(() => useDebounce('initial value', 500));
|
|
expect(result.current).toBe('initial value');
|
|
});
|
|
|
|
it('should not update the value immediately when the source value changes', () => {
|
|
const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
|
|
initialProps: { value: 'first', delay: 500 },
|
|
});
|
|
|
|
expect(result.current).toBe('first');
|
|
|
|
// Rerender with a new value
|
|
rerender({ value: 'second', delay: 500 });
|
|
|
|
// The debounced value should still be the old one
|
|
expect(result.current).toBe('first');
|
|
});
|
|
|
|
it('should update the debounced value after the specified delay', () => {
|
|
const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
|
|
initialProps: { value: 'first', delay: 500 },
|
|
});
|
|
|
|
rerender({ value: 'second', delay: 500 });
|
|
|
|
// Fast-forward time by the delay amount
|
|
act(() => {
|
|
vi.advanceTimersByTime(500);
|
|
});
|
|
|
|
// Now the debounced value should be updated
|
|
expect(result.current).toBe('second');
|
|
});
|
|
|
|
it('should only update to the latest value after multiple rapid changes', () => {
|
|
const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
|
|
initialProps: { value: 'a', delay: 500 },
|
|
});
|
|
|
|
// Change the value multiple times within the delay period
|
|
rerender({ value: 'b', delay: 500 });
|
|
rerender({ value: 'c', delay: 500 });
|
|
rerender({ value: 'd', delay: 500 });
|
|
|
|
// The value should still be the initial one
|
|
expect(result.current).toBe('a');
|
|
|
|
// Advance time, but not enough for the last timeout to fire
|
|
act(() => {
|
|
vi.advanceTimersByTime(499);
|
|
});
|
|
|
|
// The value should still not have updated
|
|
expect(result.current).toBe('a');
|
|
|
|
// Advance time past the threshold for the last change
|
|
act(() => {
|
|
vi.advanceTimersByTime(1);
|
|
});
|
|
|
|
// The value should now be the *last* value that was set
|
|
expect(result.current).toBe('d');
|
|
});
|
|
|
|
it('should reset the timeout if the value changes before the delay has passed', () => {
|
|
const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
|
|
initialProps: { value: 'first', delay: 500 },
|
|
});
|
|
|
|
rerender({ value: 'second', delay: 500 });
|
|
|
|
// Advance time, but less than the full delay
|
|
act(() => {
|
|
vi.advanceTimersByTime(300);
|
|
});
|
|
|
|
// Change the value again, this should reset the timer
|
|
rerender({ value: 'third', delay: 500 });
|
|
expect(result.current).toBe('first');
|
|
|
|
// Advance time again by 300ms. Total time since 'second' was set is 600ms,
|
|
// but it should not have updated because the timer was reset.
|
|
act(() => {
|
|
vi.advanceTimersByTime(300);
|
|
});
|
|
expect(result.current).toBe('first');
|
|
|
|
// Advance time by another 200ms to complete the 500ms for 'third'
|
|
act(() => {
|
|
vi.advanceTimersByTime(200);
|
|
});
|
|
expect(result.current).toBe('third');
|
|
});
|
|
|
|
it('should clear the timer on unmount', () => {
|
|
const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout');
|
|
|
|
const { unmount, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
|
|
initialProps: { value: 'initial', delay: 500 },
|
|
});
|
|
|
|
// Trigger a change, which sets a timeout
|
|
rerender({ value: 'new value', delay: 500 });
|
|
|
|
// Unmount the component before the timeout completes
|
|
unmount();
|
|
|
|
// Expect that clearTimeout was called to prevent a state update on an unmounted component
|
|
expect(clearTimeoutSpy).toHaveBeenCalledTimes(2); // Once for the value change, once for unmount
|
|
|
|
// Fast-forward time to see if the value would have updated
|
|
act(() => {
|
|
vi.runAllTimers();
|
|
});
|
|
|
|
// The value should not have updated (we can't check result.current, but the key is no errors were thrown)
|
|
clearTimeoutSpy.mockRestore();
|
|
});
|
|
});
|