[javascript] Enzyme과 함께 사용하는 테스트 인프라 기술

29 Nov 2023

javascript

테스트는 소프트웨어 개발에서 매우 중요한 부분입니다. 테스트를 통해 코드의 동작을 확인하고 버그를 찾을 수 있습니다. 특히 React 애플리케이션의 경우, Enzyme이라는 테스트 인프라 도구를 사용하면 컴포넌트 단위로 테스트를 작성할 수 있습니다. 이번 글에서는 Enzyme을 사용하여 React 컴포넌트를 테스트하는 방법에 대해 알아보겠습니다.

Enzyme이란?

Enzyme은 React 컴포넌트를 테스트하기 위한 JavaScript 라이브러리입니다. Enzyme을 사용하면 컴포넌트의 라이프사이클 메서드, 상태, 프로퍼티 등을 간편하게 테스트할 수 있습니다. Enzyme은 가상 DOM을 사용하여 컴포넌트를 렌더링하고, 렌더링된 결과를 검증할 수 있습니다. 또한, 다양한 유형의 이벤트를 시뮬레이션하여 컴포넌트의 동작을 테스트할 수도 있습니다.

설치

먼저, Enzyme을 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 Enzyme과 함께 필요한 패키지를 설치할 수 있습니다.

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

Enzyme 사용 예제

이제 Enzyme을 사용하여 React 컴포넌트를 테스트하는 예제를 살펴보겠습니다. 아래의 코드는 버튼을 클릭할 때마다 클릭한 횟수를 표시하는 Counter 컴포넌트입니다.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Clicked: {count} times</p>
    </div>
  );
};

export default Counter;

이제 Enzyme을 사용하여 Counter 컴포넌트를 테스트해보겠습니다. 먼저, Enzyme을 import 합니다.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme';

그리고, shallow 메서드를 사용하여 Counter 컴포넌트를 렌더링합니다.

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

describe('Counter', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Counter />);
    expect(wrapper.exists()).toBe(true);
  });

  it('increments the count when button is clicked', () => {
    const wrapper = shallow(<Counter />);
    const button = wrapper.find('button');
    const count = wrapper.find('p');

    expect(count.text()).toBe('Clicked: 0 times');
    button.simulate('click');
    expect(count.text()).toBe('Clicked: 1 times');
    button.simulate('click');
    expect(count.text()).toBe('Clicked: 2 times');
  });
});

위의 예제에서는 shallow 메서드를 사용하여 Counter 컴포넌트를 렌더링합니다. 그리고, find 메서드를 사용하여 버튼과 텍스트 요소를 찾고, simulate 메서드를 사용하여 클릭 이벤트를 시뮬레이션합니다. 마지막으로, toBe 메서드를 사용하여 텍스트 요소의 내용을 검증합니다.

이렇게 Enzyme을 사용하여 React 컴포넌트를 테스트할 수 있습니다. Enzyme은 컴포넌트의 동작을 직관적으로 테스트할 수 있도록 간편한 API를 제공합니다.

결론

Enzyme은 React 컴포넌트를 테스트하기 위한 강력한 도구입니다. Enzyme을 사용하면 컴포넌트의 동작을 자세히 검증할 수 있고, 버그를 빠르게 발견할 수 있습니다. 이번 글에서는 Enzyme을 설치하고 사용하는 예제를 살펴보았습니다. Enzyme을 사용하여 React 애플리케이션의 테스트를 작성해보세요!

Enzyme이란?

설치

Enzyme 사용 예제

결론

참고 자료