Enzyme은 React 컴포넌트의 유닛 테스트를 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 React 컴포넌트의 렌더링 결과를 테스트하고, 상태(state)와 이벤트(event)를 가상으로 조작하여 테스트할 수 있습니다.
설치하기
먼저 Enzyme을 설치해야 합니다. npm을 사용하는 경우, 다음 명령어를 실행하여 설치할 수 있습니다.
npm install enzyme enzyme-adapter-react-16 react-test-renderer --save-dev
Enzyme은 enzyme-adapter-react-16과 함께 사용하기 때문에 두 가지를 모두 설치해야 합니다.
Enzyme 환경 설정
Enzyme을 사용하기 전에, 테스트 환경에서 Enzyme을 사용할 수 있도록 설정해야 합니다. Enzyme은 리액트 버전에 따라 다른 어댑터(adapter)를 사용해야 합니다. React 16을 사용하는 경우 enzyme-adapter-react-16 어댑터를 사용합니다.
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
위와 같이 설정 파일 또는 테스트 파일 상단에 위의 코드를 추가합니다.
사용 예제
다음은 Enzyme을 사용한 간단한 예제입니다.
import React from 'react';
import { shallow } from 'enzyme';
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Hello, Enzyme!</h1>
<button onClick={() => this.setState({ clicked: true })}>Click me</button>
</div>
);
}
}
describe('MyComponent', () => {
it('renders correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.contains(<h1>Hello, Enzyme!</h1>)).toBe(true);
});
it('sets state when button is clicked', () => {
const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');
expect(wrapper.state('clicked')).toBe(true);
});
});
위의 예제에서는 MyComponent라는 React 컴포넌트를 테스트합니다. 첫 번째 테스트에서는 h1 요소가 정상적으로 렌더링 되는지 확인하고, 두 번째 테스트에서는 버튼 클릭 시 상태가 변경되는지 확인합니다.
결론
Enzyme은 React 컴포넌트를 테스트하기 위한 강력한 도구입니다. 위의 가이드를 따라 설치하고 사용해보면, React 컴포넌트의 유닛 테스트를 훨씬 쉽고 간편하게 작성할 수 있습니다. Enzyme은 공식 문서에서 더 많은 정보와 사용 예제를 제공하고 있으니 참고하시기 바랍니다.