React’te testlere genel bakış

React projemizde bileşenlerimizi (Componentlerimizi) test etmenin birden çok yolu vardır. Genel olarak iki kategoriye ayrılır:

1. Bileşen ağaçları oluşturma (Rendering component trees)

Bileşen ağaçlarını basitleştirilmiş bir test ortamında oluşturma ve çıktılarını onaylama.

Statelerinizdeki değerler doğru mu? Componentler beklenen şekilde renderlanmış mı? DOMlardaki değişiklikler beklenildiği gibi mi? Çalışan fonksiyonlar beklenen değeri veriyor mu? bunun gibi soruların test türü olarak karşılığı Bileşen ağaçları oluşturma (Rendering component trees) diyebiliriz.

Testler genellikle tarayıcı gibi gerçek bir işleme yüzeyine erişimi olmayan bir ortamda çalışır. Bu ortamlar için, Node.js içinde çalışan hafif bir tarayıcı uygulaması olan jsdom ile bir tarayıcı simülasyonu yapılması önerilmekte. React test ortamları

2. Eksiksiz bir uygulama çalıştırma (Running a complete app)

Gerçek bir tarayıcı ortamında eksiksiz bir uygulama çalıştırmak veya uçtan uca (end-to-end) testler olarak da bilinir.

Uçtan uca testler, özellikle işiniz için kritik olduklarında (ödemeler veya kayıtlar gibi) daha uzun iş akışlarını test etmek için kullanışlıdır.

Bu testler için, muhtemelen gerçek bir tarayıcının tüm uygulamayı nasıl oluşturduğunu, gerçek API uç noktalarından veri aldığını, oturumları ve çerezleri nasıl kullandığını, farklı bağlantılar arasında nasıl gezindiğini test etmek istersiniz.

Bu senaryoda, Cypress, Playwright gibi bir framework veya Puppeteer gibi bir paket kullanırsınız, böylece birden çok route arasında gezinebilir ve side effectler (dom işlemleri, api istekleri gibi…) üzerinde yalnızca tarayıcıda değil, potansiyel olarak arka uçta da bir kontrolde bulunabilirsiniz.

Önerilen Test Araçları

Jest, DOM’a jsdom aracılığıyla erişmenizi sağlayan bir JavaScript test çalıştırıcısıdır(test runner) . jsdom ise tarayıcının nasıl çalıştığının yalnızca bir tahmini olsa da, genellikle React bileşenlerini test etmek için yeterince iyidir. Ve geliştiriciler için bir test ortamı sağlar.

React Testing Library, React bileşenlerini test etmenize sağlayan bir yardımcıdır.

Jest, test ettiğimiz herhangi şey ( componentler, fonksiyonlar, değişkenler v.b ) beklenen değeri almış mı onun kontrolünü sağlıyor.

React Testing Library, react componentlerimizi render etmemizi sağlarken aynı zamanda rerender (tekrardan render olma durumu), domdan bir element alırken kullanabileceğimiz kolay fonksiyonların bulunduğu (DOM Testing Library), içerisinde birçok test fonksiyonları olan bir tooldur fakat bir test çalıştırıcısı (test runner) değildir.

DOM Test Kitaplığı (DOM Testing Library), Jest, Mocha + JSDOM veya gerçek bir tarayıcı gibi DOM API’leri sağlayan herhangi bir ortamla çalışır.

Jest ile basit bir test örneği

Bu testte toplama fonksiyonuna değerler veriliyor ve fonksiyonun çıktısı beklenen değer mi diye kontrol ediyor.

React Testing Library ile basit bir test örneği

render metoduyla react componentimizi render ediyoruz. Ardından userEvent metodunu kullanarak bir click eventi simule ediyoruz. await eklememizin sebebi Fetch componentimizin bir url ile sunucuya api request yapıyor ve bu işlem asenkron bir işlemdir eş zamansız olarak gerçekleşir işte bu tür durumlarda await ekleyerek sen bu değerin gelmesini bekle diyoruz.

screen.getByText(‘Load Greeting’) <button>Load Greeting</button> elementini buluyor.

getByRole(”heading”) bir başlığı veya açıkça role="heading" verilmiş bir öğeyi buluyor.

Fetch componentimiz apiden gelen bilgiyi role attributesi heading olan elementin içerisine bu textleri yerleştirdiğini varsayalım. İşte toHaveTextContent() bu ‘hello there’ texti var mı onu kontrol ediyor. Ve son olarakta toBeDisabled() tıklanılan butonumuz disabled olmuş mu onun kontrolünü yapıyor.

İki Örnekten Hareketle Farkına Vardığımız Şey Ne?

Jest ile beklenen değerlerin kontrolünü sağlarken React Testing Library ile component render etme, dom elementi bulma ve bir tıklama eventı simule etme işlemini yapıyoruz.

jsdom, Node.js içinde çalışan hafif bir tarayıcı uygulaması. Çoğu durumda, jsdom normal bir tarayıcı gibi davranır, ancak düzen ve gezinme gibi özelliklere sahip değildir.

React Testing Library’te act() fonksiyonu ne işe yarıyor?

act(), React’in render ve state güncellemelerini testteki kontroller çalışmadan önce tamamlamasını sağlar. Aksi hâlde test henüz güncellenmemiş arayüzü okuyabilir. React Testing Library’nin render gibi yardımcıları çoğu durumda act() çağrısını sizin yerinize yapar.

Doğrudan kullandığınızda React dokümantasyonu await act(async () => …) biçimini öneriyor. Eski ReactDOM.render örneğinin createRoot ile karşılığı şöyle:

import { act } from "react";
import { createRoot } from "react-dom/client";

it("renders 1", async () => {
  const container = document.createElement("div");
  const root = createRoot(container);
  try {
    await act(async () => {
      root.render(<App />);
    });
    expect(container.textContent).toBe("1");
  } finally {
    await act(async () => root.unmount());
  }
});