[javascript] Enzyme의 이모지 테스트 기능

29 Nov 2023

javascript

React 애플리케이션을 테스트할 때, Enzyme은 매우 유용한 도구입니다. 이 블로그 포스트에서는 Enzyme을 사용하여 이모지 테스트 기능을 구현하는 방법을 알아보겠습니다.

Enzyme이란?

Enzyme은 React 컴포넌트의 테스트를 간편하게 할 수 있는 JavaScript 라이브러리입니다. Enzyme은 컴포넌트를 마운트하고, 감지하고, 조작하고, 렌더링 결과를 검증하는 등의 기능을 제공합니다.

이모지 테스트 기능 구현하기

Enzyme을 사용하여 이모지 테스트를 구현하는 방법은 다음과 같습니다.

Enzyme 설치하기

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

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

이모지 컴포넌트 생성하기

테스트할 이모지를 표현하는 컴포넌트를 생성합니다. 다음과 같은 Emoji 컴포넌트를 생성해보겠습니다.

import React from 'react';

const Emoji = ({ symbol, label }) => (
  <span
    style=
    role='img'
    aria-label={label ? label : ''}
    aria-hidden={label ? 'false' : 'true'}
  >
    {symbol}
  </span>
);

export default Emoji;

이 컴포넌트는 symbol과 label을 props로 받아서 이모지를 렌더링합니다.

테스트 작성하기

이제 테스트 파일을 작성해보겠습니다. Emoji.test.js라는 파일을 생성하고, 다음과 같은 코드를 작성합니다.

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

describe('Emoji', () => {
  it('renders with correct symbol and label', () => {
    const wrapper = shallow(<Emoji symbol="🌟" label="star" />);
    expect(wrapper.find('span').text()).toEqual('🌟');
    expect(wrapper.find('span').prop('aria-label')).toEqual('star');
  });

  it('renders with default label', () => {
    const wrapper = shallow(<Emoji symbol="😊" />);
    expect(wrapper.find('span').text()).toEqual('😊');
    expect(wrapper.find('span').prop('aria-label')).toEqual('');
  });
});

이 테스트 파일은 Emoji 컴포넌트의 렌더링 결과와 props를 확인합니다. 첫 번째 테스트는 정상적인 props 값으로 렌더링되는지를 확인하고, 두 번째 테스트는 label이 주어지지 않았을 때 기본값으로 렌더링되는지를 확인합니다.

테스트 실행하기

테스트를 실행하기 전에 프로젝트에 설정 파일을 추가해야 합니다. src/setupTests.js 파일을 생성하고, 다음과 같은 코드를 추가합니다.

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

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

이제 터미널에서 npm test 명령어를 실행하여 작성한 테스트를 실행할 수 있습니다.

결론

Enzyme을 사용하여 이모지 테스트 기능을 구현하는 방법을 살펴보았습니다. 이와 같은 테스트를 작성하면 React 애플리케이션의 이모지 관련 컴포넌트를 더 효과적으로 테스트할 수 있습니다. Enzyme의 다른 기능들도 함께 사용하여 애플리케이션을 더 안전하고 견고하게 개발할 수 있습니다.

Enzyme이란?

이모지 테스트 기능 구현하기

결론

참고 자료