React 애플리케이션을 개발할 때, 컴포넌트의 인터랙션을 테스트하기 위해 Enzyme이라는 라이브러리를 사용할 수 있습니다. Enzyme은 React 컴포넌트의 동작을 시뮬레이트하고 다양한 검증 도구를 제공하여 테스트를 쉽게 작성할 수 있게 도와줍니다.

Enzyme 설치하기

먼저, Enzyme을 설치해야 합니다. 아래의 명령어를 사용하여 Enzyme을 설치해주세요.

npm install --save-dev enzyme enzyme-adapter-react-16

Enzyme 설정하기

Enzyme을 사용하기 위해서는 설정이 필요합니다. 보통 setupTests.js 파일을 생성하고 다음과 같이 설정할 수 있습니다.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

컴포넌트 인터랙션 테스트

이제 Enzyme을 사용하여 컴포넌트의 인터랙션을 테스트할 수 있습니다. 예를 들어, 버튼 클릭 시 상태가 변경되는 컴포넌트를 테스트하려면 다음과 같이 작성할 수 있습니다.

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('버튼 클릭 시 상태가 변경되어야 함', () => {
    const wrapper = shallow(<MyComponent />);
    const button = wrapper.find('button');

    // 버튼 클릭 시 이벤트 처리
    button.simulate('click');

    // 상태 변경 검증
    expect(wrapper.state('isOpen')).toBe(true);
  });
});

위의 코드에서 shallow 함수는 컴포넌트를 얕게 렌더링하여 테스트할 수 있게 해주며, find 함수를 사용하여 버튼을 찾고 simulate 함수를 사용하여 클릭 이벤트를 시뮬레이트합니다. 마지막으로, expect 함수를 사용하여 상태 변경을 검증합니다.

마무리

위에서 소개한 방법은 Enzyme을 이용한 인터랙션 테스트의 기본적인 방법입니다. Enzyme은 다양한 기능을 제공하기 때문에 더 자세한 사용 방법은 공식 문서를 참고하시기 바랍니다.