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

1. act가 필요한 경우

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

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

  클릭하여 코드 펼치기

  // 예시
  await act(async () => {
  render(<ComponentWithAPI />);
  });
  클릭하여 코드 복사

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

• useState 사용
• setState 호출
  lisp

  클릭하여 코드 펼치기

  act(() => {
  fireEvent.click(button);  // 상태 변경 발생
  });
  클릭하여 코드 복사

3. 3. 타이머 사용시

• setTimeout, setInterval
  arcade

  클릭하여 코드 펼치기

  act(() => {
  jest.runAllTimers();  // 타이머 실행
  });
  클릭하여 코드 복사

I. act가 필요없는 경우

1. 1. 단순 렌더링 체크

less

클릭하여 코드 펼치기

render(<StaticComponent />);
expect(screen.getByText("hello")).toBeInTheDocument();
클릭하여 코드 복사

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

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

  클릭하여 코드 펼치기

  fireEvent.click(button);  // 내부적으로 act 포함
  await waitFor(() => {});  // 내부적으로 act 포함
  클릭하여 코드 복사

3. 3. 정적 값 확인

css

클릭하여 코드 펼치기

expect(element).toHaveStyle({ color: 'red' });
클릭하여 코드 복사

1. async/await와 함께 사용

1. 필요한 경우

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

  클릭하여 코드 펼치기

  await act(async () => {
  // 비동기 작업 포함된 렌더링
  });
  클릭하여 코드 복사

2. 필요없는 경우

• 동기 작업만 있을 때
  arcade

  클릭하여 코드 펼치기

  act(() => {
  // 동기 작업만 있는 경우
  });
  클릭하여 코드 복사

2. 주의사항

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