[REACT] TDD 와 리액트 테스트 도구

TDD

[출처] https://marsner.com/blog/why-test-driven-development-tdd/

Test Driven Development. 테스트 주도 개발

테스트가 개발을 이끌어 나가는 형태의 개발론.

프로그램을 개발하기 이전에 테스트 코드를 작성하고 실행함으로써 예상되는 결과가 출력되는 지 확인하고 구현하는 방식의 코딩 방법론이다.

 

실패(Red) - 성공(Green) - 리팩토링(Refactor) 이라는 3단계를 반복한다.

• 실패 : 실패하는 테스트 케이스를 작성한다.
• 성공 : 실패하는 테스트 케이스를 통과시키기 위한 코드를 작성하여 테스트를 통과시킨다.
• 리팩토링 : 구현한 코드에 중복을 제거하거나 개선시킨다.

 

TDD 를 진행하면서 테스트 케이스를 주로 작은 단위로 만들기 때문에 코드를 작성할 때 너무 방대하지도 않고, 자연스러운 모듈화가 이뤄진다. 이로서 코드의 질이 향상되어 리팩토링과 유지보수가 쉬워진다는 장점을 가진다.

그리고 실제 발생할 수 있는 상황에 대비하기 때문에 프로그램의 완성도가 올라가고 버그에 낭비하는 시간을 최소한으로 할 수 있다.

 

 

 

테스트의 종류

유닛 테스트

Unit Test. 단위 테스트

가장 작은 단위에 대해서 진행하는 테스트로 여기에서 가장 작은 단위에는 함수, 컴포넌트 등을 말한다.

프로젝트를 기능별로 쪼개고 함수들로 쪼개고 또 나누어 각 작업이 잘 이뤄지는지에 대한 확인을 한다.

 

유닛 테스트의 예시

• 컴포넌트가 잘 렌더링된다.
• 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다.

 

각 기능이 모두 잘 작동하는지 확인은 할 수 있지만 전체적으로 잘 작동되는지 확인은 어려울 수도 있다.

 

 

통합 테스트

Integration Test

기능들이 전체적으로 잘 동작하는지 확인하기 위해서 사용하는 테스트이다.

 

통합 테스트의 예시

• 여러 컴포넌트들이 잘 렌더링되며 서로 상호 작용을 한다.
• DOM 이벤트를 발생 시켰을 때 UI에 원하는 변화가 잘 발생한다.

 

유닛 테스트가 하나에 초점을 둔다면

통합 테스트는 여러 요소들을 고려하기 때문에 여러 파일들을 불러와서 사용하게 될 수도 있다.

참고로 한 파일에 있는 여러 기능들을 함께 사용하는 것도 통합 테스트로 간주한다.

 

 

 

---

리액트 테스트에 사용되는 도구들

React 컴포넌트를 테스팅할 때

react-dom/test-utils 안에 들어있는 유틸 함수를 사용해서 테스트 코드 작성도 가능하지만 불편한 점들이 있기에

리액트 공식문서에서도 테스팅 라이브러리 사용을 권장하고 있다.

 

Jest

페이스북에서 만든 JavaScript 테스트 프레임워크 Jest

Jest

개발자가 JavaScript와 TypeScript 코드에 대한 테스트를 실행할 수 있으며

React 애플리케이션을 테스트하는 데에 많이 사용된다.

 

기본적으로 자동화된 테스트 환경을 제공한다.

Jest는 테스트 코드를 완전히 분리시켜 서로에게 영향을 주지 않도록 한다.

이렇게 분리된 테스트는 동시 실행이 가능해 전체 테스트 시간을 단축 시켜 준다.

 

단순함을 강점으로 설계된 프레임워크로 구성이 간편하고 위처럼 실행 속도가 빠른 것이 장점.

단, 복잡한 비동기 테스트 시나리오에 대한 지원은 부족할 수 있는 점이 단점이다.

 

 

 

Enzyme

Airbnb에서 만든 JavaScript 유틸리티 라이브러리 Enzyme

Introduction · Enzyme

 

구현 주도 테스트(Implementation Driven Test) 라는 목표를 가지고

어플리케이션이 내부적으로 어떻게 동작하는지에 초점을 가진 테스트를 한다.

 

컴포넌트의 내부 상태(state)나 생명 주기 메서드에 직접 접근하고 조작하는 테스트가 가능해

컴포넌트의 내부 동작과 상태를 쉽게 확인 가능하다는 장점을 갖는다.

단, React 17부터 공식적으로 지원되지 않아 더 이상 업데이트되지 않을 수도 있다는 단점을 갖는다.

 

 

 

React Testing Library

React 컴포넌트를 테스트하기 위해 특별히 제작된 JavaScript 테스트 유틸리티 React Testing Library

React Testing Library | Testing Library

행위 주도 테스트(Behavior Driven Test) 라는 목표를 가지고

각각의 구성요소에 대한 사용자 상호작용을 테스트하고, UI가 올바르게 작동하는지를 확인한다.

 

실제 사용자의 행위와 사용자가 보는 화면을 테스트하는데 초점을 맞추고 있어

사용자가 더 직관적이고 간결한 테스트 코드 작성이 가능한 것이 장점이다.

단, 복잡한 비동기 상황에 대한 처리가 상대적으로 아쉽다.

 

 

 

정리

위 도구들은 딱 한 가지만 사용할 수 있는 것이 아니며 여러개 함께 사용 가능하다.

가장 흔한 조합은 Jest + React Testing Library 이며 .

테스트의 목적과 개발 팀의 선호도에 따라 적절한 도구를 선택하는 것이 중요하다.

 

 

 

---

참고

벨로퍼트와 함께하는 리액트 테스팅

프론트엔드 테스팅 네 번째 걸음 : 리액트 테스팅