E2E 와 UnitTest

UnitTest 와 E2E 테스트 기준

1) 테스트 기준

Cypress

유저 시나리오와 관련된 모든 테스트를 진행한다.

단) UnitTest만으로 진행 가능한 테스트는 예외로 한다.

API 요청이 필요한 테스트는 Cypress 로 진행한다.

Route 변경이 필요한 테스트는 Cypress로 진행한다.

Page 단위에서 테스트는 Cypress로 진행한다.

UnitTest

Unitest는 컴퍼넌트 최소 기능 위주의 테스트를 진행한다.

필요에 따라 Mocking data을 만들어 Components Test를 진행한다.

요소별 렌더링 테스트는 Unittest에서 진행한다.

비교

테스트 정의

유닛 테스트는 모든 함수나 메서드 등이 정확하게 동작하는지에 대해서 테스트하는 것

통합 테스트는 다양한 모듈이 통합되는 과정에서 일어나는 일에 대한 검증

E2E 테스트는 특정한 시나리오를 기준으로 사용자 관점에서 진행되는 테스트

1) Cypress

컴퍼넌트 테스트시 추가 모듈 및 플러그인 설치 및 설정이 필요

브라우저 기반 watch & hot reload 모드

2) Jest + React-testing-library

react-testing-library는 Jest의 대체품이 아니고, 리액트 컴포넌트 테스트를 하려면 어차피 둘 다 필요하다.

Jest 같은 경우는 test runner이다.(테스트를 실행하도록 해준다.) 테스트를 찾아서 실행하고 해당 테스트가 통과일지 실패일지를 결정한다.

react-testing-library는 리액트 컴포넌트 testing을 위한 가상 돔(Virtual DOM)을 제공해준다.

테스트 코드

Arrange : 테스트 데이터와 테스트 조건 및 환경 설정을 준비

Act : 테스트해야 하는 로직 실행

Assets : 예상한 결과와 실행 결과를 비교

CLI 기반 watch & hot reload 모드

컴퍼넌트 테스트에 적합(구성 요소 테스트에 적합)

별개의 컴포넌트의 무결성을 체크할 수 있음

스냅샷 테스트 (발자가 수작업으로 결과를 비교하면 개발자의 판단이 개입되며 이 판단은 100% 믿을 수가 없다.)

스냅샷이란 성공하는 케이스 화면을 찍어두고 현재 화면과 비교하는 테스트 방법이다.

스냅샷 테스트는 UI가 예상 밖으로 변경되지 않도록 하기 원하는 경우 매우 유용한 도구

색깔이나 복잡한 디자인의 코드를 일일히 대조하면서 테스트하는 것은 힘들고 비효율적이다.

3) 차이점

Jest는 실제 브라우저가 아닌 JSDom을 이용한 가상의 브라우저 환경에서 실행되기 때문에 제약이 있다. 예를 들어, 브라우저의 렌더링 엔진을 사용할 수 없기 때문에 실제 렌더링된 결과인 픽셀 정보를 받아올 수 없고, URL 변경 등을 처리하는 방식이 달라서 라우터의 동작을 테스트하기가 어렵다.

jest는 실제 화면에 표시된 UI를 볼 수 없다. cypress는 실제 UI를 보면서 테스트를 진행할 수 있다.

4) 공통점

둘 다 DOM에서 테스트한다.

5) 정리

cypress할 수 있는 테스트와 Jest에서 할 수 있는 테스트가 동일하다.

다만 테스트하는 환경이 다르고, 방법이 다르다.

유닛테스트와 E2E 테스트는 성격이 다름

jest 테스트에서 조금 더 상세한 컴퍼넌트 테스트가 이루어져야 한다.

Cypress 테스트를 jest 와 함께 도입한다면, 조금 더 큰 틀에서 테스트를 하면 될 것 같다.

필요한 요소값들이 잘 있는가 정도로 코드를 작성한다.

유닛테스트 :

유닛 + 통합 테스트와 함께 진행되는 컴포넌트 테스트는 온전히 컴포넌트의 관점에서 해당 기능이 제대로 동작하는지에 초점이 맞춰져 있다. 그래서 Input에 어떤 값을 입력하고 어떤 버튼을 눌렀을 때 어떤 결과가 나온다 등으로 설명된다.

컴포넌트가 다른 환경에 의존하지 않고 그 자체만으로 제대로 동작하는지는 유닛 테스트를 통해 확인

E2E 테스트 :

시나리오를 기준으로 테스트가 진행된다. 사용자에게 Input에 어떤 값을 입력하고 어떤 버튼을 눌렀을 때 어떤 결과가 나오는 것은 중요하지 않다. 이런 것보다는 시나리오에 따라 1. 로그인을 진행한다. 2. 로그인을 진행하는 과정에서 회원 가입이 되어 있지 않다. 3. 회원 가입 버튼을 누른다. 4. 회원 가입 폼이 보인다 등과 같이 테스트의 초점이 사용자에게 집중되어야 한다.

유저의 입장에서 전체적인 어플리케이션의 Flow를 테스트