React 테스트에서 act()에 대해 알아야 할 모든 것

An update to %s inside a test was not wrapped in act(...).

When testing, code that causes React state updates
should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

import { act } from '@testing-library/react';

const AutoCounter = () => {
  const [count, setCount] = useState(0);

  // 10ms 후에 자동으로 증가
  useEffect(() => {
    setTimeout(() => {
      setCount(c => c + 1);
    }, 10);
  }, []);

  return <h1>Count: {count}</h1>;
};

vi.useFakeTimers();

test('auto-increments after 10ms', () => {
  render(<AutoCounter />);
  const heading = screen.getByRole('heading');

  expect(heading).toHaveTextContent('Count: 0');

  // 10ms로 가짜 타이머를 진행하면
  // 컴포넌트의 setTimeout이 트리거됩니다.
  // 이는 자체적으로 상태 변경을 트리거합니다.
  vi.advanceTimersByTime(10);
  // 참고: 대기 중인 타이머만 실행할 수도 있습니다: vi.runOnlyPendingTimers()

  expect(heading).toHaveTextContent('Count: 1'); // ❌ 실패
});

vi.useFakeTimers();

test('auto-increments after 10ms', async () => {
  render(<AutoCounter />);
  const heading = screen.getByRole('heading');

  expect(heading).toHaveTextContent('Count: 0');

  // 타이머가 10ms로 진행될 때 상태 변경을 트리거합니다.
  // setTimeout을 통해. 하지만 이번에는 act()로 감싸서
  // 모든 상태 변경이 동기화된 후에 어설션을 수행합니다.
  await act(async () => {
    vi.advanceTimersByTime(10);
  });

  expect(heading).toHaveTextContent('Count: 1');
});

const Counter = () => {
  const [count, setCount] = useState(0);

  const onClick = () => setCount(prev => prev + 1);
  return (
    <div>
      <button onClick={onClick}>Increment</button>
      <h1>Count: {count}</h1>
    </div>
  );
};

test('clicking button updates count', async () => {
  render(<Counter />);

  const button = screen.getByRole('button');
  const heading = screen.getByRole('heading');

  expect(heading).toHaveTextContent('Count: 0');

  // DOM 요소에서 click()을 직접 호출 - 이 경우 act()가 필요합니다!
  await act(async () => {
    button.click();
  });

  expect(heading).toHaveTextContent('Count: 1'); // ✅ 통과!
  // 하지만 `act()`를 사용하지 않았다면 실패했을 것입니다. 현재 `Count: 0`일 것입니다.
});

const useCounter = () => {
  const [value, setValue] = useState(0);
  const increment = () => {
    setValue(val => val + 1);
  };
  return {
    increment,
    value,
  };
};

test('can increment the counter', async () => {
  const { result } = renderHook(useCounter);

  expect(result.current.value).toBe(0); // ✅ 통과

  result.current.increment();

  expect(result.current.value).toBe(1); // ❌ 실패!

  result.current.increment();
  expect(result.current.value).toBe(2); // ❌ 실패!
});

test('can increment the counter', async () => {
  const { result } = renderHook(useCounter);

  expect(result.current.value).toBe(0); // ✅ 통과

  await act(async () => {
    result.current.increment();
  });

  expect(result.current.value).toBe(1); // ✅ 통과

  await act(async () => {
    result.current.increment();
  });
  expect(result.current.value).toBe(2); // ✅ 통과
});

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

const AsyncButton = () => {
  const [status, setStatus] = useState('idle');

  const handleClick = async () => {
    setStatus('loading');
    // API 호출을 시뮬레이트합니다.
    await new Promise(resolve =>
      setTimeout(resolve, 100)
    );
    setStatus('done');
  };

  return (
    <div>
      <button onClick={handleClick}>
        Click me
      </button>
      <p>Status: {status}</p>
    </div>
  );
};

test('button updates status after async operation', async () => {
  render(<AsyncButton />);

  const button = screen.getByRole('button');

  expect(
    screen.getByText('Status: idle')
  ).toBeInTheDocument();

  // act() 없이 비동기 상태 업데이트가 반영되지 않습니다.
  await act(async () => {
    button.click();
    // 비동기 작업이 완료될 때까지 기다립니다.
    await new Promise(resolve =>
      setTimeout(resolve, 100)
    );
  });

  expect(
    screen.getByText('Status: done')
  ).toBeInTheDocument();
});

// ❌ 이렇게 하지 마세요:
await act(async () => {
  await userEvent.click(button);
});

// ✅ 대신 클릭을 대기할 수 있습니다:
await userEvent.click(button);

await act(async () => {
  someElement.click();
});

expect(
  screen.getByText(
    'you clicked something'
  )
).toBeInTheDocument();

someElement.click();

// `await findByText()`로 대체:
expect(
  await screen.findByText(
    'you clicked something'
  )
).toBeInTheDocument();

await act(async () => {
  vi.runOnlyPendingTimers();
});

expect(
  screen.getByText('some updated text')
).toBeInTheDocument();

vi.runOnlyPendingTimers();

await waitFor(() => {
  expect(
    screen.getByText(
      'some updated text'
    )
  ).toBeInTheDocument();
});

await act(async () => {
  // 상태 변경 코드를 여기에 작성하세요
});

await screen.findByText(
  'expected text'
);
await waitFor(() => 
  expect(
    someMockFunction
  ).toHaveBeenCalled()
);

global.IS_REACT_ACT_ENVIRONMENT = true;