[javascript] Enzyme의 퍼블릭 API 테스트 방법
Enzyme은 React 컴포넌트의 테스트 및 조작을 쉽게 도와주는 JavaScript 테스트 유틸리티입니다. 이러한 유틸리티를 사용하여 React 컴포넌트의 퍼블릭 API를 테스트할 수 있습니다. 이번 블로그 포스트에서는 Enzyme을 사용하여 React 컴포넌트의 퍼블릭 API를 어떻게 테스트할 수 있는지 알아보겠습니다.
설치
Enzyme을 사용하기 위해서는 먼저 이를 설치해야 합니다. 다음 명령을 사용하여 Enzyme과 함께 필요한 의존성을 설치할 수 있습니다:
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
테스트 환경 설정
Enzyme을 사용하기 위해선 테스트 환경을 설정해야 합니다. 일반적으로 Jest와 함께 사용됩니다. 다음과 같이 테스트 환경을 설정합니다:
// test-setup.js 파일
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
// package.json 파일
{
...
"jest": {
"setupFilesAfterEnv": ["./test-setup.js"]
}
}
퍼블릭 API 테스트 예제
다음은 예시로 Button 컴포넌트의 퍼블릭 API를 테스트하는 방법입니다:
// Button.js 파일
import React from 'react';
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
clicked: false
};
}
handleClick() {
this.setState({ clicked: true });
}
render() {
const { text } = this.props;
const { clicked } = this.state;
return (
<button onClick={() => this.handleClick()}>
{text}
{clicked && <span>Clicked</span>}
</button>
);
}
}
export default Button;
// Button.test.js 파일
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';
describe('Button 컴포넌트', () => {
it('버튼을 클릭하면 "Clicked" 메시지가 보여야 한다', () => {
const wrapper = shallow(<Button text="Click me" />);
const button = wrapper.find('button');
button.simulate('click');
const message = wrapper.find('span');
expect(message.text()).toBe('Clicked');
});
});
위 예제에서는 shallow 함수를 사용하여 Button 컴포넌트를 얕게 렌더링합니다. 그런 다음 button 요소를 찾고 simulate 메소드를 사용하여 클릭 이벤트를 트리거합니다. 마지막으로 span 요소를 찾고 메시지가 “Clicked”로 표시되는지 확인합니다.
결론
Enzyme을 사용하면 React 컴포넌트의 퍼블릭 API를 테스트하기 위해 간단하고 강력한 도구를 제공합니다. 이를 통해 개발자는 컴포넌트의 동작을 자동화하여 안정성을 향상시키고 버그를 예방할 수 있습니다. Enzyme의 다양한 기능을 활용하여 React 애플리케이션의 테스트를 쉽게 작성해보세요!