1. 각 라이브러리 소개
프론트엔드 테스팅에 있어서 React Testing Library(RTL)와 Enzyme는 대표적인 라이브러리이다. 이 둘은 같은 목적을 가지고 있지만, 서로 다른 방식과 철학으로 테스팅을 접근한다. 이 글에서는 RTL과 Enzyme의 장단점을 비교하고, 나의 생각을 공유해보려고 한다.
1-1. React Testing Library의 장점 및 단점
RTL은 테스팅 라이브러리로서의 새로운 패러다임을 제시한다. 사용자 중심의 테스트를 가능하게 하여 실제 사용자 경험에 더 가깝게 테스트를 작성할 수 있게 도와줍니다.
장점
- 사용자의 관점에서 테스트를 작성하도록 돕는다.
- 컴포넌트의 구현 세부 사항보다는 실제 동작에 집중하게 한다.
- UI가 예상대로 동작하는지 검증하는 데 초점을 맞춘다.
단점
- Enzyme보다 상대적으로 허들이 높다.
- 컴포넌트의 내부 상태나 메소드에 직접 접근할 수 없다.
1-2. Enzyme의 장점 및 단점
Enzyme은 Airbnb에서 만든 테스팅 라이브러리로, React 컴포넌트를 쉽게 조작하고 상태를 관리할 수 있게 해 준다.
장점
- 컴포넌트의 인스턴스에 접근이 가능하여, 메소드를 직접 호출할 수 있다.
- Shallow rendering을 통해 컴포넌트를 단독으로 테스트할 수 있다.
- 컴포넌트의 내부 상태를 검사하고 변경할 수 있다.
단점
- 테스트의 복잡성이 증가할 수 있다. 왜냐하면 Enzyme은 컴포넌트의 내부 구현에 대한 지식을 필요로 한다.
- 내부 상태나 생명주기 메소드를 이용한 테스트는 코드의 리팩토링을 어렵게 만든다. <<< 이 부분이 개인적으로 최대의 단점이라고 생각됨
2. 나의 생각
RTL vs Enzyme
프론트엔드 테스팅의 핵심은 "사용자가 바라보는 화면에 대한 테스트"라는 점이다. 따라서 이 점에서 보면 RTL이 사용자 경험에 가까운 테스팅을 가능하게 함으로써 더 우위에 있다.
예를 들어, 버튼을 눌렀을 때 전역 상태가 바뀌어서 UI가 변경되는 상황을 생각해 보자. 상태 관리 도구를 redux에서 recoil로 변경한다면 Enzyme으로 작성한 테스트는 모두 실패하게 될 것이다. 왜냐하면 Enzyme 테스트는 구현 세부사항에 의존하기 때문이다.
그러나 RTL을 사용하면 이 문제를 피할 수 있다. RTL은 UI의 최종 결과에만 관심이 있기 때문에, 상태 관리 라이브러리가 무엇인지는 중요하지 않다. 그래서 위 상황에서도 테스트는 계속 통과하게 될 것이다.
import { render, fireEvent } from '@testing-library/react';
import { MyComponent } from './MyComponent';
test('change UI after button click', () => {
const { getByTestId, getByText } = render(<MyComponent />);
fireEvent.click(getByTestId('myButton'));
expect(getByText('Updated!')).toBeInTheDocument();
});위 코드는 버튼 클릭 후 UI가 변경되는 것을 확인하는 RTL 테스트 코드이다. 이 코드는 UI의 최종 결과에만 초점을 맞추므로, 내부 구현이 어떻게 변경되든 간에 계속 통과하게 된다.
결론적으로, Enzyme과 RTL은 각각의 장점과 단점이 있지만, 나는 사용자 경험에 집중하는 RTL의 접근법이 더욱 현대적인 테스팅 패러다임에 부합한다고 생각한다. 이를 통해 테스트 코드의 신뢰성이 높아지고, 테스팅 자체도 더욱 효과적으로 이루어질 수 있다고 생각한다. 이는 결국 더 나은 소프트웨어를 만드는 데 도움이 될 것이다.
100% 개인적인 견해입니다.
