[javascript] Enzyme의 이더의 테스트용 이모저모

29 Nov 2023

javascript

Enzyme은 React 컴포넌트의 테스트를 쉽고 유연하게 만들어주는 JavaScript 테스트 유틸리티입니다. 이 글에서는 Enzyme을 사용하여 이더(ether) 테스트를 작성하는 방법에 대해 알아보겠습니다.

Enzyme 설치

먼저, Enzyme을 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

npm install enzyme enzyme-adapter-react-16 enzyme-to-json --save-dev

Enzyme 설정

Enzyme을 사용하기 위해선 enzyme-adapter-react-16을 설정해주어야 합니다. 다음 코드는 테스트 파일 상단에 작성해주세요.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

기본적인 Enzyme 테스트

Enzyme은 shallow 렌더링 및 전체 DOM 렌더링을 지원합니다. shallow 렌더링은 컴포넌트의 자식 컴포넌트를 렌더링하지 않고 테스트하기에 적합한 방법입니다. 아래는 Enzyme을 사용하여 컴포넌트의 특정 요소를 테스트하는 예시입니다.

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders a div with text "Hello, World!"', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('div').text()).toEqual('Hello, World!');
  });
});

이 예시에서는 MyComponent라는 컴포넌트를 shallow 렌더링하여 div 요소의 텍스트가 “Hello, World!”인지를 테스트합니다.

Enzyme API

Enzyme은 다양한 API를 제공하여 테스트 작성을 더욱 쉽게 할 수 있습니다. 몇 가지 주요 API를 살펴보겠습니다.

find(selector)

find 메소드는 선택자를 사용하여 컴포넌트 내부의 요소를 찾습니다. 다음 예시는 MyComponent 컴포넌트 내부에서 p 요소를 찾는 예시입니다.

const wrapper = shallow(<MyComponent />);
const paragraph = wrapper.find('p');

simulate(event[, …args])

simulate 메소드는 이벤트를 시뮬레이트합니다. 다음 예시는 button 클릭 이벤트를 시뮬레이트하는 예시입니다.

const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');

setState(newState)

setState 메소드는 컴포넌트의 상태를 변경합니다. 다음 예시는 MyComponent 컴포넌트의 상태를 변경하는 예시입니다.

const wrapper = shallow(<MyComponent />);
wrapper.setState({ count: 10 });

결론

Enzyme은 React 컴포넌트의 테스트를 쉽게 작성할 수 있도록 도와줍니다. 이더의 테스트를 작성하는 데에도 Enzyme을 효과적으로 사용할 수 있습니다. 앞으로 Enzyme을 사용하여 테스트 코드를 작성해보세요!

참고 문서: