테스트 코드란?

테스트란 의도된 대로 정확히 작동하는지 검증하는 절차이다.

왜 작성해야해요?

1. 정확성 및 신뢰성 확보
   a. 테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인합니다.
   b. 다양한 조건 및 입력에서 React 컴포넌트가 예상대로 동작하는지 확인합니다. (사용자가 서비스를 사용하는데 문제가 없는지 확인합니다.)

작성했을 때는 어떤 이점이 있죠?

1. 수월한 리팩토링
   a. 프로젝트가 성장하면 리팩토링이 필요하다. (코드 품질, 성능 개선, 새로운 패턴 적용 등등..)
   b. 테스트 코드 작성으로 통과해야하는 최소한의 기준이 만들어진다.
   c. 변경사항 또는 최적화가 예상치 못한 버그를 만들지 않도록한다.

2. 문서화에 용이하다.

3. 온보딩에 용이하다.
   a. 새로온 합류한 개발자가 테스트코드를 통해 컴포넌트를 이해할 수 있습니다.
   b. "테스트 케이스"가 jira ticket이라면 해당 컴포넌트의 상세 구현사항을 확인하기 용이하다.

언제 해야하나요?

1. 리팩토링 전 테스트코드 작성 추천
   a. 프로젝트 초반부터 작성하면 좋지만, 일반적으로 시간이 부족하다.
   b. 리팩토링 전 테스트코드로 안정망을 둘러두고 리팩토링을 진행한다.

그래서 무엇을 테스트 할 거예요?

1. 사용자가 서비스를 사용하는데 문제 없다는 것은?
   a. 비스니스 로직을 테스트 해야한다.
   b. 코드가 잘 동작한다는 것은? 이벤트를 테스트 해야합니다. (ex. input, button)
2. 이벤트를 테스트 한다는 것은?

ex) 로그인을 예시 들면
 
i. 아이디, 비밀번호 인풋이 잘 입력 되나요?
ii. 버튼이 활성화되고 클릭은 잘 되나요?
iii. 로그인 성공/실패 시 다음 액션이 잘 이루어지나요?

그럼 무엇을 테스트 하지 않을 것인가?

1. margin, padding
   a. 반응형을 고려한다면 margin은 확인하는데 의미가 없다.
   -> UI테스트는 스토리 북을 사용합니다.

다양한 유형의 테스트가 존재한다.

1. 유닛테스트
   a. 가장 작은 단위의 테스트

ex) 로그인을 예로 들면

1. 이메일 인풋이 잘 입력 되나요?
2. 비밀번호 인푹이 잘 입력 되나요?
3. 버튼이 잘 클릭 되나요?

2. 통합테스트
   a. 유닛테스트의 결과물들이 하나로 묶여서 잘 작동하는지 테스트 한다.

ex) 로그인을 예로 들면

i. 가입된 이메일과 비밀번호를 사용해서 로그인이 잘 되는지
ii. 잘못된 정보로 로그인 시도를 할 경우 에러메시지가 잘 나오나요?

3. e2e 테스트
   a. 사용자들이 실제 사용하는 것처럼 테스트

ex) 로그인을 예로 들면
i. 로그인 페이지에 접근해서 가입된 이메일과 비밀번호를 사용해서 로긍니이 잘 되는지
ii. 로그인 페이지에 접근해서 잘못된 정보로 로그인 시도할 경우 에러메시지가 잘 나오는지

🤔 통합테스트 vs e2e테스트 (둘 차이점..?)

1. 통합테스트 vs e2e 테스트
   a. 컴포넌트 렌더링을 하고 테스트하느냐
   b. 페이지에 접근해서 테스트하느냐
   결론: 구분하는게 크게 의미가 없기에 jest vs cypress가 더 적합한 접근이다.