Enzyme은 React 애플리케이션의 단위 테스트를 작성하는 데 도움을 주는 JavaScript 라이브러리입니다. 이 라이브러리는 컴포넌트의 렌더링 결과 검증, 상태 및 속성 테스트, 이벤트 시뮬레이션과 같은 다양한 테스트 기능을 제공합니다.

이 글에서는 Enzyme를 사용하여 단위 테스트 케이스를 작성하는 방법에 대해 알아보겠습니다. 아래는 Enzyme의 사용 예시입니다.

설치하기

먼저, 프로젝트에 Enzyme을 설치해야 합니다. NPM을 사용하여 설치할 수 있습니다.

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

테스트 환경 설정하기

다음으로, Enzyme을 사용하기 위해 테스트 환경을 설정해야 합니다. setupTests.js 파일을 프로젝트의 루트 디렉토리에 생성하고 다음 내용을 작성합니다.

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

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

테스트 케이스 작성하기

이제 테스트 케이스를 작성해보겠습니다. 예를 들어, MyComponent라는 React 컴포넌트를 테스트하는 케이스를 작성해보겠습니다.

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

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

  it('should display the correct text', () => {
    const wrapper = shallow(<MyComponent />);
    const text = wrapper.find('.text').text();
    expect(text).toEqual('Hello, World!');
  });

  it('should call the onClick handler', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<MyComponent onClick={onClick} />);
    wrapper.find('button').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

위의 예시에서는 shallow 함수를 사용하여 컴포넌트를 렌더링하고, expect 함수를 사용하여 예상되는 결과를 검증합니다. toMatchSnapshot 함수는 컴포넌트의 렌더링 결과를 스냅샷과 비교하여 변경사항이 있는지 확인하는데 사용됩니다.

실행하기

이제 테스트를 실행해보겠습니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행합니다.

$ npm test

테스트 결과는 콘솔에 출력되며, 테스트 케이스가 성공적으로 통과하면 테스트가 완료됩니다.

결론

Enzyme은 React 애플리케이션의 단위 테스트 작성을 위해 유용한 도구입니다. 위에서 설명한 단계에 따라 Enzyme을 설치하고 테스트 환경을 설정한 다음, 테스트 케이스를 작성하여 애플리케이션의 동작을 검증할 수 있습니다.