act

 

🎯 act란 무엇인가요?

**act**는 React에서 테스트를 작성할 때 상태 변화나 화면 업데이트가 모두 완료된 시점을 보장해주는 함수예요.
쉽게 말하면 **"화면 업데이트가 다 끝난 후에 확인하게 해주는 도구"**라고 생각하면 돼요.

React는 상태가 바뀔 때마다 화면이 업데이트되죠?
그런데 테스트를 작성할 때 화면이 완전히 업데이트되기 전에 확인하면, 테스트가 실패할 수 있어요.
이럴 때 **act**를 사용하면 화면 업데이트가 완료될 때까지 기다려줘서 안정적인 테스트를 작성할 수 있답니다.

 

🧩 왜 act가 필요할까요?

상상해 보세요.

여러분이 피자 가게를 운영하고 있어요. 🍕

• 주문을 받으면 피자를 만들기 시작합니다.
• 피자가 완전히 구워지기 전에 손님에게 보여준다면?
  손님은 "이게 뭐야? 덜 익었네!"라고 할 거예요.

React 테스트도 마찬가지예요.
화면이 다 업데이트되기 전에 상태를 확인하면 잘못된 결과가 나올 수 있어요.
그래서 act는 피자가 완전히 구워질 때까지 기다려주듯이 React 컴포넌트의 상태와 화면 업데이트가 다 끝난 후에만 테스트를 진행하게 해줘요.

 

🛠️ act를 사용하는 예제

간단한 버튼 클릭 시 카운터가 증가하는 컴포넌트를 테스트해볼게요.

 

1. 컴포넌트 코드

import React, { useState } from 'react';

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}

 

2. 테스트 코드 (act 사용)

act를 사용하지 않으면 상태 업데이트가 완료되기 전에 테스트가 실행될 수 있어요.
이럴 땐 act로 감싸서 업데이트가 완료된 후 확인하도록 해야 해요.

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

test('버튼 클릭 시 카운터가 증가해야 한다', () => {
  render(<Counter />);

  const button = screen.getByText('+1 증가');
  const counter = screen.getByText(/카운트: 0/);

  // act를 사용해서 상태 업데이트가 완료되도록 기다림
  act(() => {
    fireEvent.click(button);
  });

  // 업데이트된 값을 확인
  expect(screen.getByText(/카운트: 1/)).toBeInTheDocument();
});

 

🔍 코드 설명

1. render
   • 테스트 도구인 **@testing-library/react**를 사용해 컴포넌트를 화면에 렌더링합니다.
2. act 사용
   • act로 **fireEvent.click(button)**을 감싸면 버튼 클릭으로 인한 상태 변화와 화면 업데이트가 완료될 때까지 기다립니다.
3. 업데이트된 값 확인
   • 상태가 업데이트된 후, 화면에 **"카운트: 1"**이 있는지 확인합니다.

 

🚨 act를 사용하지 않으면?

만약 act를 사용하지 않고 테스트를 작성하면 이런 경고가 나올 수 있어요:

Warning: An update to Counter inside a test was not wrapped in act(...).

이 경고는 React가 상태 변화와 화면 업데이트가 완료되지 않았을 수 있다고 알려주는 거예요.
테스트에서 이런 불안정한 상황을 피하려면 act를 꼭 사용해야 해요.

 

🌟 act 사용 시 주의할 점

1. 상태 업데이트를 감싸기
   • 상태나 화면 업데이트를 테스트할 때는 act로 감싸주세요.
2. 비동기 작업 처리
   • 비동기 코드(예: setTimeout, API 호출)에서 상태를 업데이트할 때는 **await act(async () => {...})**를 사용해야 해요.

     await act(async () => {
       await fetchData(); // 비동기 작업 완료 대기
     });

3. 테스트 도구
   • **@testing-library/react**와 함께 사용할 때 act는 대부분 자동으로 적용됩니다.
   • 하지만 명시적으로 사용해야 할 때도 있으니 경고가 뜨면 확인해 보세요.

🚀 한 줄 요약

act는 React 테스트에서 상태 업데이트와 화면 렌더링이 완료된 후에만 테스트가 진행되도록 도와주는 함수예요.
테스트가 더 정확하고 안정적으로 작동하도록 꼭 사용해 주세요!