React Testing 테스트 중에 act를 사용해야 할때

act가 필요한 경우

1. 컴포넌트 내부에 비동기 작업이 있을 때

• useEffect 내 비동기 작업
• API 호출 (axios, fetch 등)

  // 예시
  await act(async () => {
  render(<ComponentWithAPI />);
  });

2. 상태 업데이트가 있는 경우

• useState 사용
• setState 호출

  act(() => {
  fireEvent.click(button);  // 상태 변경 발생
  });

3. 타이머 사용시

• setTimeout, setInterval

  act(() => {
  jest.runAllTimers();  // 타이머 실행
  });

act가 필요없는 경우

1. 단순 렌더링 체크

render(<StaticComponent />);
expect(screen.getByText("hello")).toBeInTheDocument();

2. 이미 act를 포함하는 메서드 사용시

• fireEvent (단순 이벤트)
• waitFor
• userEvent

  fireEvent.click(button);  // 내부적으로 act 포함
  await waitFor(() => {});  // 내부적으로 act 포함

3. 정적 값 확인

expect(element).toHaveStyle({ color: 'red' });

async/await와 함께 사용

필요한 경우

• 컴포넌트에 비동기 작업이 있을 때

  await act(async () => {
  // 비동기 작업 포함된 렌더링
  });

필요없는 경우

• 동기 작업만 있을 때

  act(() => {
  // 동기 작업만 있는 경우
  });

주의사항

1. 중첩 사용 피하기
2. 불필요한 곳에 사용하지 않기
3. 테스트 가독성 유지하기