[javascript] Enzyme으로 리액트 컴포넌트 테스트하기
React는 화면에 UI를 구성하는 컴포넌트 기반의 라이브러리입니다. 컴포넌트가 예상대로 동작하는지 확인하기 위해 테스트는 매우 중요합니다. 이때 Enzyme은 React 컴포넌트를 손쉽게 테스트할 수 있는 도구입니다.
Enzyme이란?
Enzyme은 Airbnb에서 개발한 React 컴포넌트 테스트 유틸리티입니다. React 컴포넌트의 렌더링, 상태/속성 접근, 이벤트 시뮬레이션 등을 간편하게 수행할 수 있습니다. Jest, Mocha, Chai 등과 함께 사용할 수 있으며, 강력한 유닛 테스트 환경을 제공합니다.
설치하기
먼저, 프로젝트의 루트 폴더에서 아래 명령어를 실행하여 Enzyme을 설치합니다.
npm install --save enzyme enzyme-adapter-react-16 enzyme-to-json
그리고 src 폴더에 setupTests.js 파일을 생성하고 아래 코드를 추가합니다.
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
예제: 버튼 컴포넌트 테스트하기
이제 Enzyme을 사용하여 간단한 버튼 컴포넌트를 테스트해보겠습니다.
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';
describe('Button 컴포넌트', () => {
it('텍스트를 올바르게 렌더링 해야 함', () => {
const wrapper = shallow(<Button text="Click me" />);
const buttonText = wrapper.find('span').text();
expect(buttonText).toBe('Click me');
});
it('클릭 이벤트가 발생해야 함', () => {
const onClickMock = jest.fn();
const wrapper = shallow(<Button text="Click me" onClick={onClickMock} />);
wrapper.simulate('click');
expect(onClickMock).toHaveBeenCalled();
});
});
위의 예제에서는 Enzyme의 shallow 메서드를 사용하여 Button 컴포넌트를 렌더링합니다. 그리고 find 메서드로 특정 엘리먼트를 찾아내고, text 메서드로 내용을 확인합니다. 마지막으로 simulate 메서드로 이벤트를 시뮬레이션하고, toHaveBeenCalled 메서드로 이벤트 핸들러가 호출되었는지 검증합니다.
결론
Enzyme은 React 컴포넌트의 테스트를 더욱 편리하게 수행할 수 있는 도구입니다. 설치하고, 사용법을 숙지하여 효과적인 유닛 테스트 환경을 구성해 보세요.