[javascript] Enzyme을 이용한 UI 테스트 방법

29 Nov 2023

javascript

UI 테스트는 웹 애플리케이션의 사용자 인터페이스를 검증하고 품질을 보증하는 중요한 작업입니다. 이러한 테스트를 수행하기 위해 Enzyme이라는 유용한 도구가 있습니다. Enzyme은 React의 컴포넌트 테스트를 위한 JavaScript 라이브러리로, 컴포넌트의 렌더링 결과를 쉽게 확인하고 다양한 기능들을 제공해줍니다.

설치

Enzyme을 사용하기 위해서는 먼저 프로젝트에 Enzyme 패키지를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하세요:

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

사용법

Enzyme을 이용해 테스트하려는 React 컴포넌트를 import 합니다.

Enzyme의 shallow 메서드를 사용해 컴포넌트를 렌더링합니다.

 import { shallow } from "enzyme";
 import MyComponent from "./MyComponent";

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

shallow 메서드는 컴포넌트의 자식 컴포넌트들을 렌더링하지 않고, 해당 컴포넌트의 props와 상태만을 확인합니다.

컴포넌트의 렌더링 결과를 확인하기 위해 enzyme의 다양한 메서드를 사용할 수 있습니다. 일부 예시는 다음과 같습니다:
- find: 특정 선택자에 해당하는 요소를 찾습니다.
  wrapper.find('.my-class')
- props: 컴포넌트의 속성을 확인합니다.
  wrapper.props().text
- simulate: 이벤트를 시뮬레이트합니다.
  wrapper.find('button').simulate('click')
UI 테스트에 부가적으로 사용할 수 있는 기능들도 있습니다:
- toMatchSnapshot: 컴포넌트의 스냅샷을 생성합니다.
  expect(wrapper).toMatchSnapshot()
- toExist: 렌더링 결과가 존재하는지 확인합니다.
  expect(wrapper.exists()).toBe(true)

결론

Enzyme은 React 컴포넌트의 테스트를 쉽고 효과적으로 수행할 수 있는 강력한 도구입니다. 이를 통해 UI 테스트의 자동화 및 테스트 커버리지를 높일 수 있습니다. Enzyme의 다양한 메서드와 기능을 활용하여 웹 애플리케이션의 품질을 향상시키세요.

설치

사용법

결론

참고 자료