Asenkron Testler

Asenkron arayüz nedir?

Bazı değişiklikler hemen olmaz. Örnekler:

• API yanıtı gelince ürün listesi görünür.

• Ürün sepete eklenince bildirim çıkar ve 3 saniye sonra kapanır.

Testiniz bu değişikliği beklemelidir. Beklemezseniz test, arayüz güncellenmeden kontrol yapar ve başarısız olur.¹

Hangi aracı kullanmalıyım?

findBy: sonradan görünecek eleman

findBy* elemanı bulana kadar bekler. Süre dolarsa hata fırlatır. Varsayılan süre 1000 ms.³

test("yüklenirken bilgi mesajı, sonra ürünleri gösterir", async () => {
  render(
    <ProductList
      loadProducts={() => Promise.resolve(products)}
      onAddToCart={vi.fn()}
    />,
  );

  expect(screen.getByText("Ürünler yükleniyor...")).toBeInTheDocument();
  expect(await screen.findAllByRole("article")).toHaveLength(3);
});

İlk satırda getBy* kullanıldı. Yükleme mesajı ilk render'da zaten ekrandadır. Bekleme gerekmez.³

waitFor: koşulun doğru olmasını bekleme

waitFor, verdiğiniz fonksiyon hata fırlatmayı bırakana kadar onu tekrar tekrar çalıştırır. Varsayılan süre 1000 ms.¹

Bir elemanın kaybolmasını beklerken queryBy* kullanın:³

await waitFor(() =>
  expect(screen.queryByText("Ürünler yükleniyor...")).not.toBeInTheDocument(),
);

Fake timers: zamanı kontrol etme

Ürün sepete eklenince bir bildirim görünür. Bildirim 3 saniye sonra kapanır. 3 saniye bekleyen bir test yavaştır. Zamanı kendiniz ilerletin.²

import { useEffect, useState } from "react";

export function AddedToast({ productName }: { productName: string }) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const id = setTimeout(() => setVisible(false), 3000);

    return () => clearTimeout(id);
  }, []);

  return visible ? <div role="status">{productName} sepete eklendi.</div> : null;
}

import { act, render, screen } from "@testing-library/react";
import { AddedToast } from "./AddedToast";

beforeEach(() => {
  vi.useFakeTimers({ shouldAdvanceTime: true });
});

afterEach(() => {
  vi.useRealTimers();
});

test("3 saniye sonra bildirim kaybolur", async () => {
  render(<AddedToast productName="Kablosuz Kulaklık" />);

  expect(await screen.findByRole("status")).toHaveTextContent(
    "Kablosuz Kulaklık sepete eklendi.",
  );

  act(() => {
    vi.advanceTimersByTime(3000);
  });

  expect(screen.queryByRole("status")).not.toBeInTheDocument();
});

Üç kurala dikkat edin:

• vi.useFakeTimers çağrısını render öncesinde yapın. Component'in setTimeout çağrısı fake olmalıdır.⁶

• vi.advanceTimersByTime çağrısını act içine alın. Zamanlayıcı bir React state'ini günceller.⁷

• vi.useRealTimers çağrısını afterEach içinde yapın.⁸ Test hata verse bile afterEach çalışır.

Kendin dene

API çağrısı başarısız olunca ne görünür? Bunu test edin:

• loadProducts fonksiyonu Promise.reject(new Error("ağ hatası")) döndürür.

• findByRole("alert") ile Ürünler yüklenemedi. mesajını bulun.

• queryBy* ile Ürünler yükleniyor... mesajının kaybolduğunu doğrulayın.