React에서 Enzyme으로 컴포넌트 테스트하기

 

React 애플리케이션의 품질을 유지하려면 컴포넌트 테스트는 필수적입니다. Enzyme은 React 컴포넌트의 렌더링과 상호작용을 쉽게 테스트할 수 있는 JavaScript 테스트 유틸리티입니다. 이 글에서는 Enzyme을 이용한 React 컴포넌트 테스트에 대해 상세히 살펴보겠습니다.

---

1. Enzyme이란 무엇인가?

Enzyme은 Airbnb에서 개발한 React 전용 테스트 라이브러리로, 다음과 같은 기능을 제공합니다:

• Shallow Rendering: 단일 계층의 컴포넌트만 렌더링하여 부모-자식 간 상호작용을 배제합니다.
• Full DOM Rendering: 전체 DOM을 생성하고 컴포넌트를 포함한 하위 컴포넌트를 테스트합니다.
• Static Rendering: 렌더된 HTML 구조를 분석하고 비교합니다.

Enzyme은 React 컴포넌트의 상태, props, DOM 이벤트 등을 검증하기 쉽도록 설계되어 있어 테스트 효율성을 극대화합니다.

---

2. Enzyme 설치 및 설정

Enzyme을 설치하려면 다음 명령어를 사용합니다.

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

Enzyme은 React의 특정 버전에 맞는 어댑터가 필요하므로, 사용 중인 React 버전에 따라 알맞은 어댑터를 선택해야 합니다. 예를 들어, React 17을 사용하는 경우 아래 명령어를 실행합니다:

npm install @wojtekmaj/enzyme-adapter-react-17 --save-dev

설치 후에는 Enzyme을 설정 파일에서 초기화해야 합니다. Jest를 사용하는 경우, setupTests.js 파일을 생성하거나 수정하여 다음을 추가합니다:

import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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

이제 Enzyme을 사용할 준비가 되었습니다!

---

3. Shallow Rendering으로 컴포넌트 테스트하기

Shallow Rendering은 컴포넌트의 상위 계층만 렌더링합니다. 이를 통해 하위 컴포넌트와의 의존성을 최소화할 수 있습니다. 예제를 통해 알아봅시다.

컴포넌트 코드: Button.js

import React from 'react';

const Button = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

테스트 코드: Button.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('<Button />', () => {
  it('renders the button with the correct label', () => {
    const wrapper = shallow(<Button label="Click me" />);
    expect(wrapper.text()).toEqual('Click me');
  });

  it('triggers onClick when button is clicked', () => {
    const onClickMock = jest.fn();
    const wrapper = shallow(<Button label="Click me" onClick={onClickMock} />);

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

테스트 결과

위 테스트는 다음을 확인합니다:

1. 버튼이 올바른 **label**로 렌더링되었는지.
2. onClick 핸들러가 버튼 클릭 시 호출되는지.

Shallow Rendering은 빠른 테스트를 가능하게 하며, 하위 컴포넌트와의 의존성을 제거해 테스트 범위를 좁힐 수 있습니다.

---

4. Full DOM Rendering으로 상호작용 테스트하기

Full DOM Rendering은 컴포넌트와 하위 컴포넌트를 모두 렌더링합니다. React 컴포넌트의 실제 DOM 동작을 테스트하려면 이 방식을 사용합니다.

예제: 폼 컴포넌트

컴포넌트 코드: Form.js

import React, { useState } from 'react';

const Form = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

테스트 코드: Form.test.js

import React from 'react';
import { mount } from 'enzyme';
import Form from './Form';

describe('<Form />', () => {
  it('updates input value on change', () => {
    const wrapper = mount(<Form />);
    const input = wrapper.find('input');

    input.simulate('change', { target: { value: 'React Testing' } });
    expect(wrapper.find('input').prop('value')).toEqual('React Testing');
  });

  it('prevents default on form submit', () => {
    const wrapper = mount(<Form />);
    const mockEvent = { preventDefault: jest.fn() };

    wrapper.find('form').simulate('submit', mockEvent);
    expect(mockEvent.preventDefault).toHaveBeenCalled();
  });
});

테스트 결과

위 테스트는 다음을 확인합니다:

1. 사용자가 입력한 값이 상태에 반영되는지.
2. 폼 제출 시 기본 이벤트가 방지되는지.

Full DOM Rendering은 복잡한 컴포넌트 상호작용을 검증하는 데 유용하며, 실제 브라우저 환경과 유사한 테스트를 제공합니다.

---

5. Static Rendering으로 HTML 구조 테스트하기

Static Rendering은 렌더링된 HTML의 구조를 확인합니다. 특정 HTML 태그가 올바르게 렌더링되었는지 검증할 때 유용합니다.

예제

컴포넌트 코드: Header.js

import React from 'react';

const Header = () => <h1>Welcome to React Testing</h1>;

export default Header;

테스트 코드: Header.test.js

import React from 'react';
import { render } from 'enzyme';
import Header from './Header';

describe('<Header />', () => {
  it('renders correct HTML structure', () => {
    const wrapper = render(<Header />);
    expect(wrapper.html()).toContain('<h1>Welcome to React Testing</h1>');
  });
});

Static Rendering은 HTML 구조를 스냅샷 테스트하거나 특정 태그와 텍스트를 검증할 때 사용됩니다.

---

6. Enzyme과 Jest를 함께 사용하기

Enzyme은 Jest와 함께 사용하면 강력한 테스트 환경을 제공합니다. Jest의 모의 함수(mock function), 스냅샷 테스트, 비교(matchers) 기능을 Enzyme의 세부 DOM 조작 기능과 결합하여 더욱 정교한 테스트를 수행할 수 있습니다.

---

7. Enzyme의 한계와 대안

Enzyme은 강력하지만 다음과 같은 한계가 있습니다:

• React 18 이상에서는 공식적으로 지원되지 않음.
• React Testing Library에 비해 **사용자 관점의 테스트(user-centric testing)**를 덜 강조함.

대안으로 React Testing Library 사용

React Testing Library는 사용자가 실제로 애플리케이션을 사용하는 방식을 시뮬레이션하는 데 초점을 둡니다. 새로운 프로젝트에서는 React Testing Library를 권장합니다.

---

8. 결론

Enzyme은 React 컴포넌트 테스트에 있어 강력한 도구입니다. Shallow Rendering으로 빠르게 컴포넌트를 검증하고, Full DOM Rendering으로 상호작용을 테스트하며, Static Rendering으로 HTML 구조를 확인할 수 있습니다.

React 생태계가 발전하면서 Testing Library와 같은 대안이 인기를 얻고 있지만, Enzyme은 여전히 많은 프로젝트에서 유용하게 사용되고 있습니다.

React 테스트의 첫걸음을 Enzyme과 함께 시작해 보세요! 🚀