`act` 유틸리티로 React 테스트 마스터하기: 종합 가이드

테스트는 견고하고 유지보수 가능한 소프트웨어의 초석입니다. React 생태계에서 철저한 테스트는 컴포넌트가 예상대로 동작하고 신뢰할 수 있는 사용자 경험을 제공하는 데 매우 중요합니다. `react-dom/test-utils`에서 제공하는 `act` 유틸리티는 신뢰할 수 있는 React 테스트를 작성하는 데 필수적인 도구이며, 특히 비동기 상태 업데이트 및 부수 효과(side effects)를 다룰 때 더욱 그렇습니다.

`act` 유틸리티란 무엇인가?

`act` 유틸리티는 React 컴포넌트가 단언(assertions)을 할 수 있도록 준비시키는 함수입니다. 이는 단언을 시작하기 전에 관련된 모든 업데이트와 부수 효과가 DOM에 적용되었음을 보장합니다. 테스트를 React의 내부 상태 및 렌더링 프로세스와 동기화하는 방법이라고 생각하면 됩니다.

본질적으로, `act`는 React 상태 업데이트를 유발하는 모든 코드를 감싸줍니다. 여기에는 다음이 포함됩니다:

• 이벤트 핸들러 (예: `onClick`, `onChange`)
• `useEffect` 훅
• `useState` 세터(setter)
• 컴포넌트의 상태를 수정하는 기타 모든 코드

`act`가 없으면 테스트가 React가 업데이트를 완전히 처리하기 전에 단언을 수행하여, 불안정하고 예측 불가능한 결과를 초래할 수 있습니다. "An update to [component] inside a test was not wrapped in act(...)."와 같은 경고를 볼 수 있습니다. 이 경고는 테스트가 React가 일관된 상태에 있기 전에 단언을 수행하는 잠재적인 경쟁 조건(race condition)을 나타냅니다.

`act`는 왜 중요한가?

`act`를 사용하는 주된 이유는 테스트 중에 React 컴포넌트가 일관되고 예측 가능한 상태에 있도록 보장하기 위함입니다. 이는 다음과 같은 여러 일반적인 문제를 해결합니다:

1. 비동기 상태 업데이트 문제 방지

React의 상태 업데이트는 종종 비동기적으로 이루어집니다. 즉, 즉시 발생하지 않습니다. `setState`를 호출하면 React는 업데이트를 예약하지만 바로 적용하지는 않습니다. `act`가 없으면 테스트는 상태 업데이트가 처리되기 전에 값을 단언하여 잘못된 결과를 초래할 수 있습니다.

예시: 잘못된 테스트 (`act` 사용 안 함)

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

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');
  fireEvent.click(incrementButton);
  expect(screen.getByText('Count: 1')).toBeInTheDocument(); // This might fail!
});

            

              
                Copy
              
            
          

이 예제에서, `expect(screen.getByText('Count: 1')).toBeInTheDocument();` 단언은 `fireEvent.click`에 의해 트리거된 상태 업데이트가 단언이 수행될 때 완전히 처리되지 않았기 때문에 실패할 수 있습니다.

2. 모든 부수 효과 처리 보장

`useEffect` 훅은 종종 API에서 데이터를 가져오거나 DOM을 직접 업데이트하는 것과 같은 부수 효과를 트리거합니다. `act`는 테스트가 계속되기 전에 이러한 부수 효과가 완료되도록 보장하여 경쟁 조건을 방지하고 컴포넌트가 예상대로 동작하도록 합니다.

3. 테스트 신뢰성 및 예측 가능성 향상

테스트를 React의 내부 프로세스와 동기화함으로써 `act`는 테스트를 더 신뢰할 수 있고 예측 가능하게 만듭니다. 이는 때로는 통과하고 때로는 실패하는 불안정한 테스트의 가능성을 줄여 테스트 스위트를 더 신뢰할 수 있게 만듭니다.

`act` 유틸리티 사용 방법

`act` 유틸리티는 사용하기 간단합니다. React 상태 업데이트나 부수 효과를 유발하는 모든 코드를 `act` 호출로 감싸기만 하면 됩니다.

예시: 올바른 테스트 (`act` 사용)

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

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', async () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');

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

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

이 수정된 예제에서는 `fireEvent.click` 호출이 `act` 호출로 감싸져 있습니다. 이를 통해 단언이 수행되기 전에 React가 상태 업데이트를 완전히 처리했음을 보장합니다.

비동기 `act`

`act` 유틸리티는 동기적으로 또는 비동기적으로 사용할 수 있습니다. 비동기 코드(예: 데이터를 가져오는 `useEffect` 훅)를 다룰 때는 비동기 버전의 `act`를 사용해야 합니다.

예시: 비동기 부수 효과 테스트하기

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

async function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Fetched Data');
    }, 50);
  });
}

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const result = await fetchData();
      setData(result);
    }

    loadData();
  }, []);

  return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
}

test('fetches data correctly', async () => {
  render(<MyComponent />);

  // Initial render shows "Loading..."
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // Wait for the data to load and the component to update
  await act(async () => {
    // The fetchData function will resolve after 50ms, triggering a state update.
    // The await here ensures we wait for act to complete all updates.
    await new Promise(resolve => setTimeout(resolve, 0)); // A small delay to allow act to process.
  });

  // Assert that the data is displayed
  expect(screen.getByText('Fetched Data')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

이 예제에서 `useEffect` 훅은 비동기적으로 데이터를 가져옵니다. `act` 호출은 비동기 코드를 감싸는 데 사용되어 단언이 수행되기 전에 컴포넌트가 완전히 업데이트되었음을 보장합니다. `await new Promise` 라인은 `useEffect` 훅 내의 `setData` 호출에 의해 트리거된 업데이트를 `act`가 처리할 시간을 주기 위해 필요하며, 특히 스케줄러가 업데이트를 지연시킬 수 있는 환경에서 그렇습니다.

`act` 사용을 위한 모범 사례

`act` 유틸리티를 최대한 활용하려면 다음 모범 사례를 따르십시오:

1. 모든 상태 업데이트 감싸기

React 상태 업데이트를 유발하는 모든 코드가 `act` 호출로 감싸져 있는지 확인하십시오. 여기에는 이벤트 핸들러, `useEffect` 훅, `useState` 세터가 포함됩니다.

2. 비동기 코드에 비동기 `act` 사용하기

비동기 코드를 다룰 때는 비동기 버전의 `act`를 사용하여 테스트가 계속되기 전에 모든 부수 효과가 완료되도록 하십시오.

3. 중첩된 `act` 호출 피하기

`act` 호출을 중첩하지 마십시오. 중첩은 예기치 않은 동작을 유발하고 테스트 디버깅을 더 어렵게 만들 수 있습니다. 여러 작업을 수행해야 하는 경우, 모두 단일 `act` 호출로 감싸십시오.

4. 비동기 `act`와 함께 `await` 사용하기

비동기 버전의 `act`를 사용할 때는 항상 `await`를 사용하여 테스트가 계속되기 전에 `act` 호출이 완료되도록 하십시오. 이는 비동기 부수 효과를 다룰 때 특히 중요합니다.

5. 과도하게 감싸지 않기

상태 업데이트를 감싸는 것이 중요하지만, 상태 변경이나 부수 효과를 직접 유발하지 않는 코드는 감싸지 마십시오. 과도하게 감싸면 테스트가 더 복잡해지고 가독성이 떨어질 수 있습니다.

6. `flushMicrotasks`와 `advanceTimersByTime` 이해하기

특정 시나리오, 특히 모의 타이머나 프로미스를 다룰 때, React가 업데이트를 즉시 처리하도록 강제하기 위해 `act(() => jest.advanceTimersByTime(time))` 또는 `act(() => flushMicrotasks())`를 사용해야 할 수도 있습니다. 이는 더 고급 기술이지만, 복잡한 비동기 시나리오에 유용할 수 있습니다.

7. `@testing-library/user-event`의 `userEvent` 사용 고려

`fireEvent` 대신 `@testing-library/user-event`의 `userEvent`를 사용하는 것을 고려해 보세요. `userEvent`는 실제 사용자 상호 작용을 더 정확하게 시뮬레이션하며, 종종 내부적으로 `act` 호출을 처리하여 더 깨끗하고 신뢰할 수 있는 테스트를 만듭니다. 예를 들면 다음과 같습니다:

            
import React, { useState } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

function MyComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

test('updates the input value', async () => {
  render(<MyComponent />);
  const inputElement = screen.getByRole('textbox');

  await userEvent.type(inputElement, 'hello');
  expect(inputElement.value).toBe('hello');
});

            

              
                Copy
              
            
          

이 예제에서 `userEvent.type`은 필요한 `act` 호출을 내부적으로 처리하여 테스트를 더 깨끗하고 읽기 쉽게 만듭니다.

일반적인 함정과 이를 피하는 방법

`act` 유틸리티는 강력한 도구이지만, 일반적인 함정과 이를 피하는 방법을 아는 것이 중요합니다:

1. 상태 업데이트 감싸기 잊어버리기

가장 흔한 함정은 상태 업데이트를 `act` 호출로 감싸는 것을 잊는 것입니다. 이는 불안정한 테스트와 예측 불가능한 동작으로 이어질 수 있습니다. 상태 업데이트를 유발하는 모든 코드가 `act`로 감싸져 있는지 항상 다시 확인하십시오.

2. 비동기 `act` 잘못 사용하기

비동기 버전의 `act`를 사용할 때는 `act` 호출을 `await`하는 것이 중요합니다. 그렇게 하지 않으면 경쟁 조건과 잘못된 결과로 이어질 수 있습니다.

3. `setTimeout` 또는 `flushPromises`에 과도하게 의존하기

`setTimeout`이나 `flushPromises`가 때로는 비동기 상태 업데이트 문제를 해결하는 데 사용될 수 있지만, 드물게 사용해야 합니다. 대부분의 경우, `act`를 올바르게 사용하는 것이 테스트의 신뢰성을 보장하는 가장 좋은 방법입니다.

4. 경고 무시하기

"An update to [component] inside a test was not wrapped in act(...)."와 같은 경고를 보면 무시하지 마십시오! 이 경고는 해결해야 할 잠재적인 경쟁 조건을 나타냅니다.

다양한 테스트 프레임워크에서의 예시

`act` 유틸리티는 주로 React의 테스트 유틸리티와 관련이 있지만, 그 원칙은 사용 중인 특정 테스트 프레임워크에 관계없이 적용됩니다.

1. Jest 및 React Testing Library와 함께 `act` 사용하기

이것이 가장 일반적인 시나리오입니다. React Testing Library는 적절한 상태 업데이트를 보장하기 위해 `act` 사용을 권장합니다.

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

// Component and test (as shown previously)

            

              
                Copy
              
            
          

2. Enzyme과 함께 `act` 사용하기

Enzyme은 또 다른 인기 있는 React 테스트 라이브러리이지만, React Testing Library가 인기를 얻으면서 사용 빈도가 줄어들고 있습니다. Enzyme과 함께 `act`를 사용하여 적절한 상태 업데이트를 보장할 수 있습니다.

            
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';

// Example component (e.g., Counter from previous examples)

it('increments the counter', () => {
  const wrapper = mount(<Counter />);
  const button = wrapper.find('button');

  act(() => {
    button.simulate('click');
  });

  wrapper.update(); // Force re-render
  expect(wrapper.find('p').text()).toEqual('Count: 1');
});

            

              
                Copy
              
            
          

참고: Enzyme을 사용할 때는 `act` 호출 후에 강제로 재렌더링하기 위해 `wrapper.update()`를 호출해야 할 수도 있습니다.

다양한 글로벌 컨텍스트에서의 `act`

`act` 사용 원칙은 보편적이지만, 실제 적용은 전 세계 여러 개발 팀이 사용하는 특정 환경 및 도구에 따라 약간씩 다를 수 있습니다. 예를 들면:

• TypeScript 사용 팀: `@types/react-dom`에서 제공하는 타입은 `act`가 올바르게 사용되도록 보장하고 잠재적인 문제에 대한 컴파일 타임 검사를 제공합니다.
• CI/CD 파이프라인 사용 팀: `act`를 일관되게 사용하면 테스트의 신뢰성이 보장되고 인프라 제공업체(예: GitHub Actions, GitLab CI, Jenkins)에 관계없이 CI/CD 환경에서 가짜 실패(spurious failures)를 방지할 수 있습니다.
• 국제화(i18n) 작업 팀: 현지화된 콘텐츠를 표시하는 컴포넌트를 테스트할 때, 현지화된 문자열을 로드하거나 업데이트하는 것과 관련된 모든 비동기 업데이트나 부수 효과를 처리하기 위해 `act`가 올바르게 사용되었는지 확인하는 것이 중요합니다.

결론

`act` 유틸리티는 신뢰할 수 있고 예측 가능한 React 테스트를 작성하는 데 필수적인 도구입니다. 테스트가 React의 내부 프로세스와 동기화되도록 보장함으로써, `act`는 경쟁 조건을 방지하고 컴포넌트가 예상대로 동작하도록 돕습니다. 이 가이드에 설명된 모범 사례를 따르면 `act` 유틸리티를 마스터하고 더 견고하고 유지보수 가능한 React 애플리케이션을 작성할 수 있습니다. 경고를 무시하고 `act` 사용을 건너뛰면 개발자와 이해관계자에게 거짓말을 하는 테스트 스위트가 만들어져 프로덕션에서 버그가 발생할 수 있습니다. 항상 `act`를 사용하여 신뢰할 수 있는 테스트를 만드십시오.