Hata Ayıklama

Test kırıldığında ne yapmalı?

Hata mesajını okuyun. Testing Library, bir sorgu başarısız olunca o anki DOM'u hata mesajıyla birlikte yazar.¹ Aşağıdaki sıra çoğu sorunu çözer:

• Hata mesajının ilk satırını okuyun.

• screen.debug() ile DOM'a bakın.

• Sorgu listesine bakın. Mesajdaki accessible roles bölümü size gerçek rolleri gösterir.²

• Sorguyu veya testi düzeltin.

screen.debug: DOM'a bakın

screen.debug() o andaki DOM'u konsola yazar.¹ Testin geçtiği veya kırıldığı noktada ekranda ne olduğunu görürsünüz.

test("ürün listesi", async () => {
  render(<ProductList loadProducts={loadProducts} onAddToCart={vi.fn()} />);

  screen.debug();

  await screen.findAllByRole("article");

  screen.debug(screen.getByRole("article", { name: "Mekanik Klavye" }));
});

Argümansız çağrı tüm sayfayı, argümanlı çağrı yalnızca verdiğiniz elemanı yazar.¹

En sık görülen 4 hata

1. Found multiple elements

TestingLibraryElementError: Found multiple elements with the role "button" and name "Sepete ekle"

Sebep: Sayfada aynı sorguya uyan birden fazla eleman var. Her ürün kartında bir Sepete ekle butonu bulunur.⁴

Çözüm: Aramayı within ile bir karta daraltın.⁵ Tüm elemanlar gerekiyorsa getAllByRole kullanın.⁴

const card = screen.getByRole("article", { name: "Mekanik Klavye" });

within(card).getByRole("button", { name: "Sepete ekle" });

2. Unable to find an accessible element

TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name "Klavye"
Here are the accessible roles:
  region:
  searchbox:
  article:
  heading:
  button:

Sebep: Sorgu eleman bulamadı. Rol, isim veya yazım yanlış olabilir. Veya eleman henüz ekranda değildir.

• Mesajdaki rol listesine bakın. Aradığınız rol listede var mı?²

• name değerini kontrol edin. Tam eşleşme gerekir: "Klavye" değil "Mekanik Klavye". Kısmi eşleşme için regex kullanın: /klavye/i.⁶, ⁴

• Eleman sonradan geliyorsa findBy kullanın.⁴

3. Eleman henüz ekranda değil

TestingLibraryElementError: Unable to find an accessible element with the role "article"
Here are the accessible roles:
  status:

Sebep: Ürünler API'den sonra gelir. Test, yükleme bitmeden kontrol yapmıştır. Rol listesinde yalnızca status (yükleme mesajı) görünür.

Çözüm: getBy yerine await screen.findBy kullanın.⁷

4. not wrapped in act(...)

An update to ProductList inside a test was not wrapped in act(...).

Sebep: Component, test bittikten veya test beklemeyi bırakmışken state'ini güncelledi. Genellikle bir asenkron işlem tamamlanmadan test sona erer.⁸

• Testin sonunda, beklediğiniz sonucu await findBy veya await waitFor ile bekleyin.⁸

• Zamanlayıcı kullanıyorsanız vi.advanceTimersByTime çağrısını act içine alın.⁸

Yaygın hatalar

Tek testi çalıştırma

Tüm testleri çalıştırmayın. Üzerinde çalıştığınız testi seçin:

pnpm vitest run src/ProductList.test.tsx

pnpm vitest run src/ProductList.test.tsx -t "aramaya göre"

-t seçeneği, adı verilen ifadeyle eşleşen testleri çalıştırır (ifade regex olarak okunur). Geliştirme sırasında pnpm vitest (izleme modu) kullanın. Dosya değişince testler yeniden çalışır.¹⁵

Coverage

Coverage, testlerin kodun ne kadarını çalıştırdığını gösterir. Kodun test edilmeyen kısımlarını bulmak için kullanın.¹⁶

pnpm add -D @vitest/coverage-v8
pnpm vitest run --coverage

Testi olmayan dosyaları da rapora eklemek için vitest.config.ts dosyasına include ekleyin:¹⁷

test: {
  coverage: {
    provider: "v8",
    include: ["src/**/*.{ts,tsx}"],
  },
},

Kendin dene

Aşağıdaki test kırılıyor. Hata mesajını okuyarak düzeltin:

test("ürünü sepete ekler", async () => {
  const user = userEvent.setup();
  const onAddToCart = vi.fn();
  render(
    <ProductList
      loadProducts={() => Promise.resolve(products)}
      onAddToCart={onAddToCart}
    />,
  );

  await user.click(screen.getByRole("button", { name: "Sepete ekle" }));

  expect(onAddToCart).toHaveBeenCalledTimes(1);
});

• Testi çalıştırın ve ilk hata mesajını okuyun.

• Hata mesajındaki rol listesine bakın.

• Önce yüklenmeyi bekleyin. Sonra Mekanik Klavye kartında within ile butonu bulun.