React testleri yazarken act() fonksiyonuyla karşılaşmak kaçınılmazdır. React uygulamalarını test etmenin temel bir kavramı olmasına rağmen, genellikle en kafa karıştırıcı ve yanlış anlaşılan yönlerinden biridir. Bu fonksiyonun temel amacı, render edilmiş bir React bileşeninin dahili durumunu güncelleyen işlevselliği sarmalamaktır. Böylece, testin geri kalanı (yani iddialar) devam etmeden önce tüm durum değişikliklerinin ve yan etkilerin React tarafından tam olarak işlendiğinden emin olunur. Bu yaklaşım, testlerinizin gerçekçi bir şekilde çalışmasını sağlar ve farkında olmadan 'eski' durum değerleri üzerinde iddialarda bulunmanızı engeller.
React Testing Library (RTL) kullanıyorsanız, userEvent ile kullanıcı etkileşimleri (await userEvent.click(...)), await findBy... fonksiyonları (await screen.findByText(...)) ve waitFor(...) fonksiyonu gibi işlevleri kullanırken act() hakkında endişelenmenize gerek yoktur. Çünkü bu RTL fonksiyonları, kendi içlerinde act() sarmalamasını zaten yaparlar. Ancak, dikkatli olunmazsa "An update to %s inside a test was not wrapped in act(...)" hatasıyla sıkça karşılaşılabilir. Bu uyarı, testlerinizdeki durum güncellemelerinin act() içine alınmadığını belirtir ve eski durum üzerinde iddialarda bulunarak gerçek hataları gözden kaçırma riskini taşır.
act() fonksiyonunu import ederken de bir kafa karışıklığı yaşanabilir. React'in kendisi act'i içerse de (import React, { act } from 'react'), bunu asla kullanmamalısınız. Her zaman @testing-library/react'ten import etmelisiniz (import { act } from '@testing-library/react';). @testing-library/react'teki bu versiyon, React'in kendi act() uygulamasının etrafında hafif bir sarmalayıcıdır. Ortam yapılandırmalarını sağlar ve act()'i yanlış kullanmaya çalıştığınızda React'in sizi uyarmasını temin eder, böylece daha güvenli ve doğru test yazımını destekler.
React testlerinde act() kullanımı, bileşen durum güncellemelerinin doğru bir şekilde işlenmesini sağlayarak testlerin güvenilirliğini ve hataları yakalama yeteneğini artırır.