`act` Yardımcı Programı ile React Testlerinde Ustalaşma: Kapsamlı Bir Kılavuz

Test, sağlam ve sürdürülebilir yazılımın temel taşıdır. React ekosisteminde, bileşenlerinizin beklendiği gibi davrandığından ve güvenilir bir kullanıcı deneyimi sağladığından emin olmak için kapsamlı testler çok önemlidir. `react-dom/test-utils` tarafından sağlanan `act` yardımcı programı, özellikle asenkron durum güncellemeleri ve yan etkilerle uğraşırken güvenilir React testleri yazmak için vazgeçilmez bir araçtır.

`act` Yardımcı Programı Nedir?

`act` yardımcı programı, bir React bileşenini iddialar (assertions) için hazırlayan bir fonksiyondur. İddialarda bulunmaya başlamadan önce ilgili tüm güncellemelerin ve yan etkilerin DOM'a uygulandığından emin olur. Bunu, testlerinizi React'in dahili durumu ve render süreçleriyle senkronize etmenin bir yolu olarak düşünün.

Özünde `act`, React durum güncellemelerinin gerçekleşmesine neden olan herhangi bir kodu sarmalar. Buna şunlar dahildir:

• Olay yöneticileri (örn. `onClick`, `onChange`)
• `useEffect` hook'ları
• `useState` setter'ları
• Bileşenin durumunu değiştiren diğer tüm kodlar

`act` olmadan, testleriniz React güncellemeleri tam olarak işlemeden önce iddialarda bulunabilir, bu da kararsız ve öngörülemeyen sonuçlara yol açar. "An update to [component] inside a test was not wrapped in act(...)." gibi uyarılar görebilirsiniz. Bu uyarı, testinizin React tutarlı bir durumda olmadan önce iddialarda bulunduğu potansiyel bir yarış durumuna (race condition) işaret eder.

`act` Neden Önemlidir?

`act` kullanmanın birincil nedeni, React bileşenlerinizin test sırasında tutarlı ve öngörülebilir bir durumda olmasını sağlamaktır. Birkaç yaygın sorunu ele alır:

1. Asenkron Durum Güncelleme Sorunlarını Önleme

React durum güncellemeleri genellikle asenkrondur, yani hemen gerçekleşmezler. `setState` çağırdığınızda, React bir güncelleme planlar ancak hemen uygulamaz. `act` olmadan, testiniz durum güncellemesi işlenmeden önce bir değeri iddia edebilir ve bu da yanlış sonuçlara yol açabilir.

Örnek: Hatalı Test (`act` Olmadan)

            
import React, { useState } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');
  fireEvent.click(incrementButton);
  expect(screen.getByText('Count: 1')).toBeInTheDocument(); // This might fail!
});

            

              
                Copy
              
            
          

Bu örnekte, `expect(screen.getByText('Count: 1')).toBeInTheDocument();` iddiası, `fireEvent.click` tarafından tetiklenen durum güncellemesi iddia yapıldığında tam olarak işlenmediği için başarısız olabilir.

2. Tüm Yan Etkilerin İşlendiğinden Emin Olma

`useEffect` hook'ları genellikle bir API'den veri getirme veya DOM'u doğrudan güncelleme gibi yan etkileri tetikler. `act`, test devam etmeden önce bu yan etkilerin tamamlandığından emin olur, yarış koşullarını önler ve bileşeninizin beklendiği gibi davrandığından emin olur.

3. Test Güvenilirliğini ve Öngörülebilirliğini Artırma

Testlerinizi React'in dahili süreçleriyle senkronize ederek, `act` testlerinizi daha güvenilir ve öngörülebilir hale getirir. Bu, bazen geçen ve bazen başarısız olan kararsız testlerin olasılığını azaltarak test takımınızı daha güvenilir kılar.

`act` Yardımcı Programı Nasıl Kullanılır?

`act` yardımcı programının kullanımı basittir. React durum güncellemelerine veya yan etkilere neden olan herhangi bir kodu bir `act` çağrısıyla sarmalamanız yeterlidir.

Örnek: Doğru Test (`act` ile)

            
import React, { useState } from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', async () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');

  await act(async () => {
    fireEvent.click(incrementButton);
  });

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

Bu düzeltilmiş örnekte, `fireEvent.click` çağrısı bir `act` çağrısı içine alınmıştır. Bu, iddia yapılmadan önce React'in durum güncellemesini tam olarak işlemesini sağlar.

Asenkron `act`

`act` yardımcı programı senkron veya asenkron olarak kullanılabilir. Asenkron kodla (örn. veri getiren `useEffect` hook'ları) uğraşırken, `act`'in asenkron sürümünü kullanmalısınız.

Örnek: Asenkron Yan Etkileri Test Etme

            
import React, { useState, useEffect } from 'react';
import { render, screen, act } from '@testing-library/react';

async function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Fetched Data');
    }, 50);
  });
}

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const result = await fetchData();
      setData(result);
    }

    loadData();
  }, []);

  return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
}

test('fetches data correctly', async () => {
  render(<MyComponent />);

  // Initial render shows "Loading..."
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // Wait for the data to load and the component to update
  await act(async () => {
    // The fetchData function will resolve after 50ms, triggering a state update.
    // The await here ensures we wait for act to complete all updates.
    await new Promise(resolve => setTimeout(resolve, 0)); // A small delay to allow act to process.
  });

  // Assert that the data is displayed
  expect(screen.getByText('Fetched Data')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

Bu örnekte, `useEffect` kancası verileri eşzamansız olarak getirir. `act` çağrısı, eşzamansız kodu sarmak için kullanılır ve iddia yapılmadan önce bileşenin tamamen güncellendiğinden emin olur. `await new Promise` satırı, özellikle zamanlayıcının güncellemeyi geciktirebileceği ortamlarda, `useEffect` kancası içindeki `setData` çağrısı tarafından tetiklenen güncellemeyi işlemesi için `act`'e zaman tanımak için gereklidir.

`act` Kullanımı için En İyi Pratikler

`act` yardımcı programından en iyi şekilde yararlanmak için şu en iyi pratikleri izleyin:

1. Tüm Durum Güncellemelerini Sarmalayın

React durum güncellemelerine neden olan tüm kodların bir `act` çağrısı içine alındığından emin olun. Buna olay yöneticileri, `useEffect` hook'ları ve `useState` setter'ları dahildir.

2. Asenkron Kod için Asenkron `act` Kullanın

Asenkron kodla uğraşırken, test devam etmeden önce tüm yan etkilerin tamamlandığından emin olmak için `act`'in asenkron sürümünü kullanın.

3. İç İçe `act` Çağrılarından Kaçının

İç içe `act` çağrılarından kaçının. İç içe geçme, beklenmedik davranışlara yol açabilir ve testlerinizin hata ayıklamasını zorlaştırabilir. Birden çok eylem gerçekleştirmeniz gerekiyorsa, hepsini tek bir `act` çağrısı içine alın.

4. Asenkron `act` ile `await` Kullanın

`act`'in asenkron sürümünü kullanırken, test devam etmeden önce `act` çağrısının tamamlandığından emin olmak için her zaman `await` kullanın. Bu, özellikle asenkron yan etkilerle uğraşırken önemlidir.

5. Aşırı Sarmalamadan Kaçının

Durum güncellemelerini sarmalamak çok önemli olsa da, doğrudan durum değişikliklerine veya yan etkilere neden olmayan kodları sarmalamaktan kaçının. Aşırı sarmalama, testlerinizi daha karmaşık ve daha az okunabilir hale getirebilir.

6. `flushMicrotasks` ve `advanceTimersByTime`'ı Anlamak

Belirli senaryolarda, özellikle sahte zamanlayıcılar (mocked timers) veya promise'lerle uğraşırken, React'i güncellemeleri hemen işlemeye zorlamak için `act(() => jest.advanceTimersByTime(time))` veya `act(() => flushMicrotasks())` kullanmanız gerekebilir. Bunlar daha ileri tekniklerdir, ancak bunları anlamak karmaşık asenkron senaryolar için yardımcı olabilir.

7. `@testing-library/user-event`'ten `userEvent` Kullanmayı Düşünün

`fireEvent` yerine `@testing-library/user-event`'ten `userEvent` kullanmayı düşünün. `userEvent` gerçek kullanıcı etkileşimlerini daha doğru bir şekilde simüle eder, genellikle `act` çağrılarını dahili olarak halleder, bu da daha temiz ve daha güvenilir testlere yol açar. Örneğin:

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

function MyComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

test('updates the input value', async () => {
  render(<MyComponent />);
  const inputElement = screen.getByRole('textbox');

  await userEvent.type(inputElement, 'hello');
  expect(inputElement.value).toBe('hello');
});

            

              
                Copy
              
            
          

Bu örnekte, `userEvent.type` gerekli `act` çağrılarını dahili olarak halleder, bu da testi daha temiz ve okunması daha kolay hale getirir.

Yaygın Tuzaklar ve Bunlardan Kaçınma Yolları

`act` yardımcı programı güçlü bir araç olsa da, yaygın tuzakların ve bunlardan nasıl kaçınılacağının farkında olmak önemlidir:

1. Durum Güncellemelerini Sarmalamayı Unutmak

En yaygın tuzak, durum güncellemelerini bir `act` çağrısı içine almayı unutmaktır. Bu, kararsız testlere ve öngörülemeyen davranışlara yol açabilir. Durum güncellemelerine neden olan tüm kodların `act` ile sarmalandığından daima emin olun.

2. Asenkron `act`'i Yanlış Kullanmak

`act`'in asenkron sürümünü kullanırken, `act` çağrısını `await` ile beklemek önemlidir. Bunu yapmamak, yarış koşullarına ve yanlış sonuçlara yol açabilir.

3. `setTimeout` veya `flushPromises`'a Aşırı Güvenmek

`setTimeout` veya `flushPromises` bazen asenkron durum güncellemeleriyle ilgili sorunları çözmek için kullanılabilse de, idareli kullanılmalıdırlar. Çoğu durumda, testlerinizin güvenilir olmasını sağlamanın en iyi yolu `act`'i doğru kullanmaktır.

4. Uyarıları Görmezden Gelmek

"An update to [component] inside a test was not wrapped in act(...)." gibi bir uyarı görürseniz, onu görmezden gelmeyin! Bu uyarı, ele alınması gereken potansiyel bir yarış durumuna işaret eder.

Farklı Test Çerçevelerinde Örnekler

`act` yardımcı programı öncelikle React'in test yardımcı programlarıyla ilişkilidir, ancak ilkeler kullandığınız belirli test çerçevesinden bağımsız olarak geçerlidir.

1. Jest ve React Testing Library ile `act` Kullanımı

Bu en yaygın senaryodur. React Testing Library, uygun durum güncellemelerini sağlamak için `act` kullanımını teşvik eder.

            
import React from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';

// Component and test (as shown previously)

            

              
                Copy
              
            
          

2. Enzyme ile `act` Kullanımı

Enzyme, React Testing Library'nin önem kazanmasıyla daha az yaygın hale gelmesine rağmen, bir başka popüler React test kütüphanesidir. Uygun durum güncellemelerini sağlamak için Enzyme ile hala `act` kullanabilirsiniz.

            
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';

// Example component (e.g., Counter from previous examples)

it('increments the counter', () => {
  const wrapper = mount(<Counter />);
  const button = wrapper.find('button');

  act(() => {
    button.simulate('click');
  });

  wrapper.update(); // Force re-render
  expect(wrapper.find('p').text()).toEqual('Count: 1');
});

            

              
                Copy
              
            
          

Not: Enzyme ile `act` çağrısından sonra yeniden render'ı zorlamak için `wrapper.update()`'ı çağırmanız gerekebilir.

Farklı Küresel Bağlamlarda `act`

`act` kullanmanın ilkeleri evrenseldir, ancak pratik uygulama, dünya çapında farklı geliştirme ekipleri tarafından kullanılan belirli ortama ve araçlara bağlı olarak biraz değişebilir. Örneğin:

• TypeScript kullanan ekipler: `@types/react-dom` tarafından sağlanan tipler, `act`'in doğru kullanılmasını sağlamaya yardımcı olur ve potansiyel sorunlar için derleme zamanı kontrolü sağlar.
• CI/CD boru hatlarını kullanan ekipler: Tutarlı `act` kullanımı, altyapı sağlayıcısından (örn. GitHub Actions, GitLab CI, Jenkins) bağımsız olarak testlerin güvenilir olmasını ve CI/CD ortamlarında sahte başarısızlıkları önlemesini sağlar.
• Uluslararasılaştırma (i18n) ile çalışan ekipler: Yerelleştirilmiş içeriği gösteren bileşenleri test ederken, yerelleştirilmiş dizeleri yükleme veya güncelleme ile ilgili herhangi bir asenkron güncellemeyi veya yan etkiyi işlemek için `act`'in doğru kullanıldığından emin olmak önemlidir.

Sonuç

`act` yardımcı programı, güvenilir ve öngörülebilir React testleri yazmak için hayati bir araçtır. Testlerinizin React'in dahili süreçleriyle senkronize olmasını sağlayarak `act`, yarış koşullarını önlemeye yardımcı olur ve bileşenlerinizin beklendiği gibi davranmasını sağlar. Bu kılavuzda belirtilen en iyi pratikleri izleyerek, `act` yardımcı programında ustalaşabilir ve daha sağlam ve sürdürülebilir React uygulamaları yazabilirsiniz. Uyarıları görmezden gelmek ve `act` kullanımını atlamak, geliştiricilere ve paydaşlara yalan söyleyen ve üretimde hatalara yol açan test takımları oluşturur. Güvenilir testler oluşturmak için her zaman `act` kullanın.