Testing con Timers y Debounce

gistfile1.txt

// Component con debounce
const SearchInput = ({ onSearch }) => {
  const [value, setValue] = useState('')

  useEffect(() => {
    const timer = setTimeout(() => {
      onSearch(value)
    }, 300)

    return () => clearTimeout(timer)
  }, [value, onSearch])

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Search..."
    />
  )
}

// Test
import { vi } from 'vitest'

describe('SearchInput with debounce', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('hace debounce de la búsqueda', async () => {
    const user = userEvent.setup({ delay: null }) // Importante para fake timers
    const handleSearch = vi.fn()

    render(<SearchInput onSearch={handleSearch} />)

    const input = screen.getByPlaceholderText(/search/i)

    await user.type(input, 'test')

    // No debería llamar inmediatamente
    expect(handleSearch).not.toHaveBeenCalled()

    // Avanzar tiempo
    act(() => {
      vi.advanceTimersByTime(300)
    })

    // Ahora sí debería llamar
    expect(handleSearch).toHaveBeenCalledWith('test')
    expect(handleSearch).toHaveBeenCalledTimes(1)
  })
})