Enzyme은 React 컴포넌트를 테스트하는 용이한 도구로 많이 사용됩니다. 이러한 테스트를 위해 Enzyme에서 사용되는 몇 가지 용어를 살펴보겠습니다.

shallow rendering

Enzyme의 shallow 메소드는 컴포넌트를 얕게 렌더링하는 기능을 제공합니다. 이는 컴포넌트의 자식 컴포넌트를 렌더링하지 않고, 가상 DOM을 생성합니다. 이를 통해 컴포넌트의 동작과 상태를 테스트할 수 있습니다.

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);

full rendering

Enzyme의 mount 메소드는 컴포넌트를 전체적으로 렌더링하는 기능을 제공합니다. 이는 실제 DOM에 컴포넌트를 마운트하고, 자식 컴포넌트를 포함한 실제 환경을 구축합니다. 이를 통해 컴포넌트의 최종 출력 결과와 상호작용을 테스트할 수 있습니다.

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);

selector

Enzyme의 find 메소드는 CSS 선택자를 사용하여 컴포넌트 내부 요소를 선택할 수 있는 기능을 제공합니다. 이를 통해 특정 HTML 요소의 값을 가져오거나, 이벤트를 트리거할 수 있습니다.

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);
const element = wrapper.find('.my-element');

props

Enzyme에서 컴포넌트의 프로퍼티를 가져오기 위해 props 메소드를 사용할 수 있습니다. 이를 통해 컴포넌트가 올바른 프로퍼티를 받고, 해당 프로퍼티를 올바르게 처리하는지를 테스트할 수 있습니다.

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent name="John" age={30} />);
const name = wrapper.props().name;
const age = wrapper.props().age;

Enzyme의 이러한 용어들은 React 컴포넌트를 테스트하는데 유용하게 사용될 수 있습니다. 자세한 내용은 Enzyme의 공식 문서를 참고하시기 바랍니다.

참고 자료

• Enzyme 공식 문서
• React 공식 웹사이트