Enzyme은 React 컴포넌트의 테스트를 도와주는 JavaScript 라이브러리입니다. 이 블로그 포스트에서는 Enzyme을 사용하여 React 컴포넌트의 테스트 스크립트를 작성하는 방법에 대해 알아보겠습니다.
Enzyme 설치
Enzyme을 사용하려면 먼저 패키지를 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하여 Enzyme을 설치할 수 있습니다.
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
테스트 스크립트 작성
Enzyme을 사용하여 React 컴포넌트를 테스트하기 위해 다음 세 가지 단계를 따라야 합니다.
- Enzyme 초기화
- 컴포넌트 렌더링
- 테스트 수행
1. Enzyme 초기화
Enzyme을 사용하기 전에 테스트 환경을 설정해야 합니다. 일반적으로 setupTests.js 파일을 생성하여 초기화 작업을 수행합니다. 다음 코드는 Enzyme을 초기화하는 예시입니다.
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
2. 컴포넌트 렌더링
테스트할 컴포넌트를 렌더링해야 합니다. Enzyme은 컴포넌트를 가상 DOM에 렌더링하여 테스트하므로, 렌더링할 컴포넌트를 shallow() 또는 mount() 메소드로 래핑합니다. shallow()는 얕은 렌더링을 수행하고, mount()는 실제 DOM 트리에 컴포넌트를 마운트합니다.
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('renders without crashing', () => {
shallow(<MyComponent />);
});
3. 테스트 수행
실제 테스트를 수행합니다. Enzyme은 여러 가지 유용한 메소드를 제공하여 컴포넌트를 검사하고 상호 작용할 수 있습니다. 예를 들어, find() 메소드를 사용하여 특정 요소를 선택하고 simulate() 메소드를 사용하여 이벤트를 시뮬레이트할 수 있습니다.
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('renders the correct text', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('h1').text()).toEqual('Hello, World!');
});
it('calls the onClick function', () => {
const onClickMock = jest.fn();
const wrapper = shallow(<MyComponent onClick={onClickMock} />);
wrapper.find('button').simulate('click');
expect(onClickMock).toHaveBeenCalled();
});
이제 Enzyme을 사용하여 React 컴포넌트의 테스트 스크립트를 작성하는 방법을 알았습니다. React 애플리케이션의 테스트를 보다 쉽고 효율적으로 수행하기 위해 Enzyme을 활용해보세요.