리액트 애플리케이션을 개발하다보면 코드의 리팩토링이 필요한 경우가 많이 발생합니다. 리팩토링은 코드의 구조를 개선하고 유지보수를 쉽게하기 위해 필요한 작업입니다. 이때 테스트를 통해 코드의 동작을 검증하는 것이 중요합니다. 이번 글에서는 Enzyme이라는 테스트 유틸리티를 소개하고, 코드 리팩토링을 테스트하는 방법에 대해 알아보겠습니다.

Enzyme이란?

Enzyme은 리액트 애플리케이션을 테스트하기 위한 JavaScript 라이브러리입니다. Enzyme은 리액트 컴포넌트와 상호작용할 수 있는 다양한 메서드를 제공하며, 컴포넌트의 렌더링 결과를 검증할 수 있습니다.

설치

Enzyme을 사용하기 위해서는 먼저 enzyme과 함께 사용할 adapter를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

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

테스트 환경 설정

리액트 16 버전과 함께 사용할 adapter를 선택하고, 테스트 파일 상단에 다음 코드를 추가합니다.

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

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

이제 Enzyme을 사용할 준비가 완료되었습니다.

테스트 작성하기

테스트를 작성할 때는 먼저 테스트하려는 컴포넌트를 렌더링한 다음, Enzyme의 메서드를 사용하여 원하는 동작을 검증합니다. 예를 들어, 다음과 같은 컴포넌트가 있다고 가정해보겠습니다.

import React from 'react';

function MyComponent(props) {
  return <div>{props.text}</div>;
}

이 컴포넌트를 테스트하려면 다음과 같이 작성할 수 있습니다.

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

describe('MyComponent', () => {
  it('renders text correctly', () => {
    const wrapper = shallow(<MyComponent text="Hello, world!" />);
    expect(wrapper.text()).toEqual('Hello, world!');
  });
});

위 테스트 코드에서는 shallow 메서드를 사용하여 MyComponent를 렌더링하고, expect를 사용하여 결과를 검증합니다. toEqual 메서드를 사용하여 예상되는 결과와 실제 결과를 비교합니다.

테스트 실행하기

테스트를 실행하려면 다음 명령어를 사용합니다.

npm test

결론

Enzyme을 사용하면 리액트 애플리케이션의 코드 리팩토링을 테스트하는 것이 더욱 쉬워집니다. 이번 글에서는 Enzyme의 기본적인 사용법에 대해 알아보았습니다. Enzyme을 통해 테스트를 작성하고 실행하여 코드의 동작을 검증하는 습관을 가지세요.