Enzyme은 JavaScript 라이브러리로서 React 애플리케이션의 테스트를 쉽게 작성하고 실행할 수 있는 도구입니다. Enzyme은 React 컴포넌트를 조작하고 검증하는 데 사용되며, 비동기 테스트에도 매우 유용합니다.

비동기 테스트란?

비동기 테스트는 애플리케이션에서 비동기적으로 처리되는 코드를 테스트하는 것을 의미합니다. 대표적인 예로는 비동기 함수나 프로미스, 콜백 함수 등이 있습니다. 이러한 비동기 코드들은 실행 순서가 보장되지 않으므로, 테스트를 작성할 때 신중하게 다루어야 합니다.

Enzyme의 비동기 테스트 기능

Enzyme은 act라는 유틸리티 함수를 제공하여 비동기 테스트를 수행할 수 있도록 도와줍니다. act 함수는 테스트 환경에서 React 컴포넌트들의 생명주기와 상호작용을 동기적으로 수행할 수 있게 해주는 역할을 합니다.

예를 들어, 다음과 같이 비동기 데이터를 가져오는 React 컴포넌트가 있다고 가정해봅시다.

class AsyncComponent extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetchData().then(data => {
      this.setState({ data });
    });
  }

  render() {
    const { data } = this.state;
    return <div>{data}</div>;
  }
}

이러한 컴포넌트를 테스트하려면 act 함수를 사용하여 비동기 동작을 동기적으로 수행해야 합니다.

import { mount } from 'enzyme';

test('비동기 데이터가 정상적으로 렌더링되는지 확인한다', async () => {
  let wrapper;
  await act(async () => {
    wrapper = mount(<AsyncComponent />);
    await Promise.resolve();
    wrapper.update();
  });

  expect(wrapper.text()).toEqual('데이터');
});

위 예제에서는 act 함수를 async/await와 함께 사용하여 컴포넌트가 마운트될 때 비동기 데이터를 가져오도록 했습니다. await Promise.resolve()를 사용하여 다음 렌더링 사이클이 수행될 때까지 대기하고, wrapper.update()를 호출하여 업데이트된 컴포넌트를 다시 렌더링합니다.

결론

Enzyme의 act 함수는 비동기 테스트를 수행할 때 React 컴포넌트의 생명주기와 상호작용을 동기적으로 처리할 수 있도록 도와줍니다. 이를 활용하여 비동기 테스트를 더 효과적으로 작성할 수 있습니다.