Debounce, setTimeout veya async işlemler içeren bir bileşeni nasıl test edersiniz?

Zamanlayıcılar için fake timers, async UI güncellemeleri için ise RTL'in **findBy* / waitFor** yardımcıları kullanılır. Testte gerçek süre beklemek (sleep(500)) testleri yavaş ve kararsız (flaky) yapar.

Fake timers ile debounce testi (Vitest)

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

beforeEach(() => vi.useFakeTimers());
afterEach(() => vi.useRealTimers());

test("arama 300 ms debounce edilir", async () => {
  const onSearch = vi.fn();
  // userEvent kendi içinde bekleme yapar; fake timer'ı ilerletmesini söyleriz
  const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
  render(<SearchBox onSearch={onSearch} />);

  await user.type(screen.getByRole("searchbox"), "react");
  expect(onSearch).not.toHaveBeenCalled();

  await vi.advanceTimersByTimeAsync(300);
  expect(onSearch).toHaveBeenCalledTimes(1);
  expect(onSearch).toHaveBeenCalledWith("react");
});

Async UI

// findBy* = waitFor + getBy; varsayılan 1000 ms boyunca tekrar dener
expect(await screen.findByText("Kaydedildi")).toBeInTheDocument();

// Bir şeyin kaybolmasını beklemek
await waitForElementToBeRemoved(() => screen.queryByText("Yükleniyor..."));

Sık hatalar

• getBy ile async içerik aramak: eleman henüz yoktur, test düşer.
• waitFor içine yan etki (tıklama) koymak; içinde sadece assertion olmalı.
• "not wrapped in act(...)" uyarısını görmezden gelmek: genelde bir async güncellemenin beklenmediğini gösterir. Çözüm act sarmak değil, doğru şeyi findBy/waitFor ile beklemektir.
• Fake timer'ı açık bırakmak; diğer testleri etkiler, afterEach'te useRealTimers çağırın.
• Custom hook'ları test etmek için renderHook kullanın (@testing-library/react).