Enzyme은 React 컴포넌트를 테스트하기 위한 JavaScript 라이브러리입니다. 이번에는 Enzyme의 프레젠테이션 보여주기 기능에 대해 소개하겠습니다.
프레젠테이션 보여주기란?
프레젠테이션 보여주기는 React 컴포넌트의 출력 결과를 렌더링하여 스크린샷 형태로 보여주는 기능입니다. 이를 통해 컴포넌트의 외부 모습을 시각적으로 확인할 수 있습니다. 이 기능은 UI 컴포넌트의 디자인 확인이나 컴포넌트 간의 레이아웃 테스트 등에 유용하게 사용될 수 있습니다.
Enzyme의 프레젠테이션 보여주기 기능 사용하기
Enzyme에서 프레젠테이션 보여주기를 위해 enzyme-to-json 패키지를 사용합니다. 이 패키지는 Enzyme의 렌더링 결과를 스냅샷으로 저장하고 비교할 수 있게 해줍니다.
먼저, 프로젝트에 enzyme-to-json 패키지를 설치합니다.
npm install --save enzyme-to-json
다음으로, 테스트하려는 React 컴포넌트의 스냅샷을 생성하고 저장하는 코드를 작성합니다.
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import MyComponent from './MyComponent';
test('MyComponent 렌더링 결과 스냅샷', () => {
const wrapper = shallow(<MyComponent />);
const snapshot = toJson(wrapper);
expect(snapshot).toMatchSnapshot();
});
위의 코드에서 MyComponent는 테스트하려는 React 컴포넌트입니다. shallow 함수를 사용하여 해당 컴포넌트를 얕게 렌더링합니다. toJson 함수를 사용하여 렌더링 결과를 스냅샷으로 변환한 후, 스냅샷을 toMatchSnapshot 함수와 함께 테스트합니다. 테스트 실행 시 최초 실행 시 스냅샷이 생성되고, 테스트 결과는 스냅샷과 비교됩니다.
스냅샷 업데이트하기
프레젠테이션 보여주기 기능을 사용하다보면 컴포넌트의 디자인이 변경되거나 레이아웃이 수정되는 경우가 발생할 수 있습니다. 이때는 스냅샷을 업데이트해야 합니다. 업데이트하려면 터미널에서 테스트를 실행하면 됩니다.
jest --updateSnapshot
위의 명령어를 실행하면 변경된 스냅샷과 현재의 테스트 결과를 비교하여 스냅샷을 업데이트합니다. 이후부터는 업데이트된 스냅샷을 기준으로 테스트가 실행됩니다.
마무리
Enzyme의 프레젠테이션 보여주기 기능을 사용하면 React 컴포넌트의 외부 모습을 손쉽게 확인할 수 있습니다. 이를 통해 디자인 변경이나 레이아웃 수정 등의 작업을 더욱 효율적으로 할 수 있습니다.