Enzyme은 React 컴포넌트의 테스트를 도와주는 JavaScript 라이브러리입니다. 테스트 시나리오를 작성하는 방법에 대해 알아보겠습니다.

Enzyme 설치

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

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

테스트 파일 생성

테스트 파일을 생성합니다. 일반적으로 .test.js 또는 .spec.js 형식으로 파일 확장자를 지정하여 작성합니다.

// myComponent.test.js

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

describe('MyComponent 테스트', () => {
  it('렌더링 테스트', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.exists()).toBe(true);
  });

  it('텍스트 내용 확인', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.text()).toBe('Hello Enzyme!');
  });

  // 추가 테스트 케이스 작성
});

테스트 코드 작성

테스트 코드를 작성합니다. shallow 함수를 사용하여 React 컴포넌트를 렌더링한 후, expect 함수로 원하는 동작을 확인합니다.

위 예시에서는 MyComponent를 렌더링하고 해당 컴포넌트가 정상적으로 렌더링되었는지, 텍스트 내용이 올바른지 확인하는 테스트를 작성하였습니다.

테스트 실행

테스트를 실행하기 위해 테스트 명령어를 실행합니다. package.json 파일에 다음과 같은 스크립트를 추가하여 실행할 수 있습니다.

{
  "scripts": {
    "test": "jest"
  }
}

그런 다음 터미널에서 npm run test 명령어를 실행하면 테스트가 실행됩니다.

결론

Enzyme을 사용하여 React 컴포넌트의 테스트 시나리오를 작성하는 방법에 대해 알아보았습니다. 이를 통해 코드의 정확성과 안정성을 보장할 수 있습니다. 자세한 내용은 Enzyme의 공식 문서를 참조하시기 바랍니다.

참고 자료:

• Enzyme 공식 문서
• React Testing Library 대비 Enzyme