Enzyme은 React 컴포넌트의 출력을 검증, 조작 및 탐색할 수 있는 강력한 자바스크립트 테스트 유틸리티입니다.
Jest 및 React 16 환경 설정
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
렌더링 모드 (Rendering Modes)
얕은 렌더링 (shallow)
자식 컴포넌트를 렌더링하지 않고 대상 컴포넌트 단일 계층만 렌더링합니다:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
전체 DOM 마운트 (mount)
가상 jsdom 환경에서 모든 자식 컴포넌트를 포함하여 완전하게 렌더링합니다:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
DOM 탐색 및 검색 (DOM Traversal & Finders)
wrapper.find('button') // CSS 선택자 또는 컴포넌트 타입으로 검색
wrapper.filter('.active') // 현재 선택된 요소 필터링
wrapper.not('.hidden') // 역조건 필터링
wrapper.children() // 자식 노드 목록 조회
wrapper.parent() // 직계 부모 요소 조회
wrapper.closest('form') // 가장 가까운 조상 요소 탐색
wrapper.first() // 첫 번째 일치 노드
wrapper.last() // 마지막 일치 노드
wrapper.at(0) // n번째 일치 노드
이벤트 시뮬레이션 (Simulating Events)
// 클릭 이벤트 발생
wrapper.find('button').simulate('click');
// 가상 이벤트 페이로드를 포함한 change 이벤트
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// 키 누름 이벤트
wrapper.find('input').simulate('keydown', { keyCode: 13 });
State, Props 및 Context 검증
// Read values
wrapper.state('loading'); // state 속성값 읽기
wrapper.prop('disabled'); // prop 속성값 읽기
wrapper.props(); // 전체 props 객체 조회
// Mutate values in tests
wrapper.setState({ count: 5 }); // 테스트 내에서 state 값 변경
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // 내부 React 인스턴스에 직접 접근
단언 및 요소 검증 (Assertions & Element Checks)
expect(wrapper.exists()).toBe(true);
expect(wrapper.hasClass('btn-primary')).toBe(true);
expect(wrapper.contains(<span className="badge">New</span>)).toBe(true);
expect(wrapper.text()).toContain('Welcome');
expect(wrapper.html()).toContain('class="active"');