[javascript] Enzyme을 이용한 클린 코드 작성 방법

29 Nov 2023

javascript

React 컴포넌트의 테스트는 소프트웨어 개발에서 매우 중요한 부분입니다. 테스트를 통해 코드의 안정성과 신뢰성을 보장할 수 있습니다. 이때 Enzyme은 React 컴포넌트의 테스트를 도와주는 유용한 도구입니다. Enzyme을 사용하여 클린 코드를 작성하는 방법에 대해 알아보겠습니다.

1. 테스트 라이브러리 설치

먼저 Enzyme을 사용하기 위해서는 해당 라이브러리와 함께 설치되어야 하는 테스트 라이브러리들을 설치해야 합니다. 주로 사용되는 테스트 라이브러리는 Jest, Mocha, Chai 등이 있습니다.

npm install --save-dev enzyme enzyme-adapter-react-16 jest

2. Enzyme 설정

Enzyme을 사용하기 위해서는 다음과 같이 설정해야 합니다.

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

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

3. Shallow Rendering을 이용한 테스트

Enzyme의 가장 기본적인 기능은 Shallow Rendering 입니다. Shallow Rendering을 사용하면 컴포넌트의 내부를 직접 접근할 수 있으며, 컴포넌트의 렌더링 결과를 쉽게 검증할 수 있습니다.

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

위의 예제에서는 MyComponent라는 컴포넌트를 Shallow Rendering하여 렌더링 결과를 스냅샷으로 저장한 후, 해당 스냅샷과 비교하여 테스트를 진행합니다.

4. Mounting을 이용한 테스트

Mounting은 Shallow Rendering과는 달리 컴포넌트의 모든 자식 컴포넌트들까지 실제로 렌더링하여 테스트하는 방법입니다. 다만, 컴포넌트 테스트의 완성도를 높이기 위해서는 Shallow Rendering보다는 Mounting을 사용하는 것이 좋습니다.

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(<MyComponent />);
    // 테스트 진행
  });
});

5. 필요한 메소드와 프로퍼티 테스트

Enzyme을 사용하면 컴포넌트의 메소드와 프로퍼티를 손쉽게 테스트할 수 있습니다.

it('calls handleClick method on button click', () => {
  const handleClickMock = jest.fn();
  const wrapper = shallow(<MyComponent handleClick={handleClickMock} />);

  wrapper.find('button').simulate('click');
  expect(handleClickMock).toHaveBeenCalled();
});

위의 예제에서는 handleClick 메소드가 정상적으로 호출되는지를 테스트하고 있습니다.

6. 리액트 컴포넌트 상태 테스트

Enzyme을 사용하면 리액트 컴포넌트의 상태를 손쉽게 테스트할 수 있습니다.

it('updates state correctly after button click', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.state('count')).toEqual(0);

  wrapper.find('button').simulate('click');
  expect(wrapper.state('count')).toEqual(1);
});

위의 예제에서는 버튼 클릭 후 상태 업데이트를 올바르게 처리하고 있는지를 테스트하고 있습니다.

결론

Enzyme을 사용하면 React 컴포넌트의 테스트를 보다 쉽게 작성할 수 있습니다. Shallow Rendering과 Mounting을 적절히 사용하여 컴포넌트의 렌더링 결과를 테스트하고, 컴포넌트의 메소드, 프로퍼티, 상태 등을 간편하게 테스트할 수 있습니다. 이러한 클린 코드 작성 방법을 활용하여 효율적이고 견고한 React 애플리케이션을 개발할 수 있습니다.

참고 문서: