[react 번역] act

출처: https://react.dev/reference/react/act

개요

act는 React 컴포넌트 테스트에서, 모든 React 업데이트가 DOM에 반영된 후에 어설션(assertion)을 할 수 있도록 도와주는 테스트 헬퍼 함수입니다. 테스트 코드에서 렌더링, 이벤트, 데이터 패칭 등 UI 상호작용 단위를 act()로 감싸면, 실제 브라우저에서 동작하는 것과 유사하게 테스트를 진행할 수 있습니다.

await act(async () => {
  // 렌더링, 이벤트, 상태 업데이트 등
});

참고: React Testing Library 등 주요 테스트 라이브러리의 헬퍼 함수들은 내부적으로 이미 act()로 감싸져 있습니다.

Reference

`await act(async actFn)`

UI 테스트에서 렌더링, 이벤트, 데이터 패칭 등 "상호작용 단위"를 act()로 감싸면, 해당 단위의 모든 React 업데이트가 DOM에 반영된 후 어설션을 할 수 있습니다.

파라미터
- async actFn: 테스트 중 렌더링, 이벤트, 상태 업데이트 등을 수행하는 비동기 함수. 이 함수 내에서 발생한 모든 업데이트는 내부 act 큐에 추가되고, 한 번에 처리되어 DOM에 반영됩니다.
반환값
- 반환값 없음(void)

sync 버전(act(() => {...}))도 있지만, React의 내부 스케줄링 특성상 예측이 어렵고, 향후 deprecated(지원 중단)될 예정이므로 async 버전 사용을 권장합니다.

사용법

컴포넌트 렌더링 테스트

import { act } from 'react';
import ReactDOMClient from 'react-dom/client';
import Counter from './Counter';

it('카운터를 렌더링하고 업데이트할 수 있다', async () => {
  const container = document.createElement('div');
  document.body.appendChild(container);

  // ✅ act()로 감싸서 렌더링
  await act(async () => {
    ReactDOMClient.createRoot(container).render(<Counter />);
  });

  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');
});

이벤트 디스패치 테스트

import { act } from 'react';
import ReactDOMClient from 'react-dom/client';
import Counter from './Counter';

it('카운터 버튼 클릭 시 값이 증가한다', async () => {
  const container = document.createElement('div');
  document.body.appendChild(container);

  await act(async () => {
    ReactDOMClient.createRoot(container).render(<Counter />);
  });

  const button = container.querySelector('button');

  // ✅ act()로 감싸서 이벤트 디스패치
  await act(async () => {
    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
  });

  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});

팁: DOM 이벤트를 테스트할 때는 컨테이너가 실제 document에 추가되어 있어야 합니다.

트러블슈팅

"The current testing environment is not configured to support act" 오류

act를 사용하려면 테스트 환경에서 global.IS_REACT_ACT_ENVIRONMENT=true가 설정되어 있어야 합니다. 설정하지 않으면 아래와 같은 경고가 발생합니다.

Warning: The current testing environment is not configured to support act(...)

해결 방법: React 테스트의 글로벌 setup 파일에 아래 코드를 추가하세요.

global.IS_REACT_ACT_ENVIRONMENT = true;

React Testing Library 등 주요 테스트 프레임워크는 이미 이 설정이 적용되어 있습니다.

참고 및 주의사항

테스트에서 모든 렌더링, 이벤트, 상태 업데이트 등은 반드시 act()로 감싸야 React의 업데이트가 모두 반영된 후 어설션이 가능합니다.
sync 버전은 향후 deprecated 예정이므로 async 버전(await act(async () => {...}))을 사용하세요.
테스트 환경 설정이 올바르지 않으면 act 관련 경고가 발생할 수 있습니다.