원티드 프리온보딩 프론트엔드 챌린지 사전미션 [테스트]

유닛테스트 vs 통합테스트 vs E2E테스트

 

유닛테스트란?

실행 가능한 유닛 단위 테스트

유닛 테스트는 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다. 즉, 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차를 말한다. - 위키백과

우리가 작성한 코드가 의도한 대로 작동하는지 검증하기 위한 절차로 문제를 방지하는 기능도 있지만, 부수적으로 코드 변경에 의한 사이드 이펙트를 최대한 줄일 수 있는 예방책이 되기도 한다. 또한, 서비스 요구사항 변경이나 리팩토링으로 인해 코드 수정이 필요한 상황에서 더 유연하고 안정적으로 대응할 수 있게 되고, 테스트 코드를 작성하는 과정에서 자연스럽게 코드의 모듈화를 고민하게 되는 등의 부수적인 이점들도 가지고 있다.

하나의 함수에 대해 하나 이상의 테스트가 존재할 수 있고, 가각의 조건에 대한 유효성 검증을 한다. 이렇게 작성된 단위 테스트가 많을수록 해당 로직에 대한 신뢰도가 높아질 수 있다. 

통합테스트란?

별도의 모듈이 제대로 작동하는지 확인하는 유일한 방법

단위 테스트에서 오류가 발견되지 않았어도, 모듈을 통합하면 상호 간의 인자나 공유 데이터 구조 등에서 오류가 발생할 수 있다.
실제 모듈 통합 시에는 다른 결과가 나올 수 있어서 실제 개발에서는 모듈 간의 상호 작용과 인터페이스에서 많은 오류가 발생하는것을 볼 수 있다. 
1. Black Box 테스트의 일종이다.
2. 인터페이스들로부터 시작한다.
3. 다양한 모듈 사이에서 통합 테스트를 작업한다.
4. 개발한 코드가 외부 의존도가 정확한지 확인할 수 있다.
5. 오류가 어디서 났는지 찾기가 힘들다.
6. 유지관리가 비싸다.

E2E테스트란?

E2E(End to End) 테스트는 개발물을 사용자 관점에서 테스트 하는 방법이다. 페이지에서 원하는 텍스트가 제대로 출력이 되었는지, 버튼을 클릭 했을 때 올바른 동작을 수행하는 지 등을 테스트한다.
모든 애플리케이션은 다양한 시스템, DB와 연결되고 통합되어있다. 따라서 앱의 Workflow는 복잡해졌다. 그래서 이러한 앱의 올바른 작동을 사용자 관점에서 확인할 수요가 늘어났다.
E2E테스트는 다양한 앱의 의존관계가 정확히 작동하는지 확인한다. 또한 정확한 정보가 다양한 시스템 컴포넌트 사이에서 전달하는지 체크할 수 있다.

1. Endpoint(종단) 간 테스트로 사용자의 입장에서 사용자가 사용하는 상황을 가정하고 테스트 하는 것
2. 일반적으로 웹이나 어플 등에서 GUI를 통해 시나리오, 기능 테스트 등을 수행한다.
3. 사용자에게 직접적으로 노출되는 부분을 점검한다.유닛 테스트로 불가능한 사용자 관점의 테스트까지 가능하다.
4. Endpoint 테스트를 통과하면 기능이 잘 작동한다는 것이므로 모든 테스트를 할 수 없다면 E2E Test만이라도 하는 것이 좋다!
4. 백엔드 관점에서 개발한 REST API를 테스트 하기 위해 실제로 서버에 요청을 보낸 뒤 클라이언트에서 원하는 데이터가 전송되는 지 확인해야 한다.

물건을 만드는 과정을 비유한 설명

1. 유닛 테스트: 유닛 테스트는 물건을 만들 때, 각 부품이나 재료들을 개별적으로 테스트하는 것과 비슷하다. 예를 들어, 자동차를 만들 때 엔진, 브레이크, 스티어링 시스템 등의 각 부품들을 따로 시험하여 기능이 정확하고 결함이 없는지 확인한다.
2. 통합 테스트: 통합 테스트는 물건을 만들 때, 각 부품들을 조합하여 전체 시스템이 정상적으로 작동하는지를 확인하는 것과 유사하다. 자동차의 경우, 엔진, 브레이크, 스티어링 등의 부품들을 차체에 조립하고, 이들이 함께 잘 동작하는지를 테스트한다.
3. E2E 테스트: E2E(End-to-End) 테스트는 물건을 완성하여 사용자가 실제로 사용하는 시나리오를 모방하여 테스트하는 것과 같다. 자동차의 경우, 운전자가 실제로 자동차를 운전하고 다양한 상황에서 시스템이 잘 작동하는지를 확인한다. 이는 모든 부품들이 원활하게 상호 작용하고 사용자에게 쾌적한 경험을 제공하는지를 보장하는 과정이다.

 

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

React testing library

가벼운 라이브러리 모듈, 구성 요소의 기능을 테스트하기 위한 코드를 작성하도록 한다.
state, props를 체크하지 않고, 사용자에게 보여지는 dom 객체를 이용하여 검증한다.
Enzyme에서 제공하는 render 메소드만 제공하고, mount, shallow와 같은 렌더링 메소드를 제공하지 않는다.

jest

Facebook에서 만든 JavaScript Test Framework. 빠르게 설치하고, 테스트하기 좋다. 실제 브라우저가 아닌 가상환경에서 실행된다.

Enzyme

Airbnb에서 개발한 React를 위한 JavaScript Testing utility.Dom 이벤트를 시뮬레이트 할 수 있고, 라이프 사이클이 제대로 돌아가는지 확인 가능하다.컴포넌트 렌더링을 위해 아래와 같은 메소드 사용.

shallow - 자기 자신만 렌더링을 하므로 독립적으로 해당 컴포넌트만 독립적으로 테스트할 수 있다.
mount - 관련된 컴포넌트를 모두 렌더링 한다. 다른 컴포넌트와의 관계를 테스트할 수 있다.
render - 컴포넌트를 정적인 html로 렌더링 한다.