Tại sao test React component phải wrap trong `act()`? Khi nào RTL tự wrap, khi nào cần `waitFor`/`findBy`?

act() đảm bảo React flush mọi state update + effect trước khi assertion chạy — mô phỏng đúng behavior browser. Không có act → console warning "An update was not wrapped in act(...)" và assertion có thể đọc state cũ.

React Testing Library tự wrap act() cho bạn trong: render(), userEvent, fireEvent. Đa số case không cần gọi act() thủ công.

jsx

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

// ❌ Double-wrap không cần — fireEvent đã wrap act
act(() => { fireEvent.click(button) })

// ✅ Standard
fireEvent.click(button)
expect(screen.getByText('Updated')).toBeInTheDocument()

// ✅ Async update — KHÔNG dùng manual act(async () => {})
// Thay bằng findBy* hoặc waitFor (đã handle act + retry)
const item = await screen.findByText('Loaded')

await waitFor(() => {
  expect(api.fetch).toHaveBeenCalled()
})

Quy tắc: nếu thấy warning "not wrapped in act", thường là do quên await cho async query, không phải thiếu act() thật.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React

React Testing Library tự wrap act() cho bạn trong: render(), userEvent, fireEvent. Đa số case không cần gọi act() thủ công.

jsx

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

// ❌ Double-wrap không cần — fireEvent đã wrap act
act(() => { fireEvent.click(button) })

// ✅ Standard
fireEvent.click(button)
expect(screen.getByText('Updated')).toBeInTheDocument()

// ✅ Async update — KHÔNG dùng manual act(async () => {})
// Thay bằng findBy* hoặc waitFor (đã handle act + retry)
const item = await screen.findByText('Loaded')

await waitFor(() => {
  expect(api.fetch).toHaveBeenCalled()
})

Quy tắc: nếu thấy warning "not wrapped in act", thường là do quên await cho async query, không phải thiếu act() thật.