React Native 앱의 품질을 보장하기 위해 테스트는 필수적입니다. 이때, Enzyme은 React 컴포넌트를 쉽게 테스트할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이번 글에서는 Enzyme을 이용하여 리액트 네이티브 앱을 테스트하는 방법에 대해 알아보겠습니다.

1. Enzyme 설치하기

먼저, Enzyme을 설치해야 합니다. 다음 명령어를 사용하여 Enzyme을 설치합니다.

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

2. 테스트 환경 설정하기

Enzyme을 사용하기 위해 테스트 환경을 설정해야 합니다. 예를 들어, Jest를 사용한다면 Jest 설정 파일에서 다음과 같이 Enzyme을 설정할 수 있습니다.

// jest.config.js

module.exports = {
  // ...
  setupTestFrameworkScriptFile: "<rootDir>/enzyme.setup.js",
  // ...
};

// enzyme.setup.js

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

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

3. 컴포넌트 테스트하기

이제 실제로 컴포넌트를 테스트해보겠습니다. 예를 들어, 다음과 같은 간단한 컴포넌트를 가정해보겠습니다.

// MyComponent.js

import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = ({ name }) => (
  <View>
    <Text>Hello, {name}!</Text>
  </View>
);

export default MyComponent;

이 컴포넌트를 테스트하기 위해 다음과 같은 테스트 파일을 작성합니다.

// MyComponent.test.js

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    expect(wrapper).toMatchSnapshot();
  });
});

위의 코드에서는 shallow라는 Enzyme 메소드를 사용하여 컴포넌트를 렌더링합니다. 그리고 toMatchSnapshot를 사용하여 스냅샷 테스트를 수행합니다. 이렇게 작성한 테스트 파일을 실행하면, 컴포넌트가 정확하게 렌더링되는지 확인할 수 있습니다.

4. 추가적인 테스트 방법

Enzyme은 리액트 네이티브 앱의 다양한 테스트 시나리오를 지원합니다. mount 메소드를 사용하여 컴포넌트를 테스트하면 실제 DOM을 사용하여 테스트할 수 있습니다. 또한, simulate 메소드를 사용하여 이벤트를 시뮬레이트하는 등 다양한 기능을 제공합니다.

더 자세한 내용은 Enzyme 공식 문서를 참고하시기 바랍니다.

참고자료

• Enzyme 공식 문서