유닛 테스트와 E2E 테스트의 보편적인 개요

• 유닛 테스트
  • 코드상으로 기능을 점검하는 것입니다.
  • 로직을 파악하는 것에 가깝습니다.
  • 테스트의 기초에 가깝다고 생각합니다.
• E2E 테스트
  • End to End 테스트의 약자입니다.
  • 쉽게 생각하면 실제 동작을 바탕으로 기능을 점검한다에 가깝습니다.
  • 실제 웹사이트에서 개발자의 의도대로 동작되는지 확인합니다.

유닛 테스트와 E2E 테스트를 둘 다 수행하면 좋습니다.

• 코드(유닛테스트)에는 이상이 없는데 브라우저 때문에 실제 동작이 안될 수 있기 때문입니다.
• 이전에는 IE(Internet Explore), 지금은 사파리(Safari)가 문제를 일으킵니다.
• 보통 크롬(Chrome)과 크롬개발자도구로 개발을 하다가 마지막에 다른 브라우저 테스트를 합니다.
• 실제 환경에서만 확인할 수 있는 것들이 있기때문에 E2E 테스트를 처으부터 세팅해두면 좋습니다.

E2E 테스트 방법

• 대부분의 브라우저는 E2E 테스트 도구가 있고 셀레니움(Selenium)이라는 브라우저 드라이버를 활용해서 E2E 테스트 코드와 연동되서 브라우저별로 동작을 시키게 됩니다.

E2E 테스트가 완벽한 보장을 해주진 않습니다.

• 테스트 결과는 괜찮지만 서비스가 완벽하다고 볼 순 없습니다.
• 테스트 코드는 우리가 의도한대로 동작한다고 이해하는 편이 더 맞습니다.
• 예를들어, 유저가 광클하는 등의 엣지 포인트(Edge Point)가 있을 수 있습니다.

그래서 엣지 포인트들은 어떻게 관리해야하는가?

• 모든 엣지 포인트를 테스트 케이스에 넣는 거에 대한 의견은 각자 다르지만 안 넣는 편이 좋습니다
• 다만 결제와 같이 엣지 포인트 발생시 심각한 문제가 예상되는 경우와 로깅(Logging)에서 발생되는 에러 같은경우는 큰 문제가 될 수 있기 떄문에 테스트에 포함합니다.
• 하지만 모든 엣지 케이스를 대응하는 것은 아닙니다.

테스트 또한 공식문서를 참고합니다.

• 이번 강의에서는 유닛 테스트만 진행하기 떄문에 여러 테스트 툴 중에 Jest 와 React Testing Library 를 사용합니다.

Jest and React Testing Library 환경 설정

1. Next.JS 공식문서를 따라 Jest 와 React Testing Library 패키지를 설치합니다.
2. jest.config.js 를 프로젝트 루트폴더에 생성하고 필요한 코드를 작성해줍니다.
3. import 를 핸들링해주기 위해서 mock.js 를 만들어 주고 하위 파일에 알맞은 코드를 작성해줍니다.
4. tsconfig.json 에서 paths 에 컴포넌트를 추가해줍니다.
5. scripts 에 "test": "jest --watch" 를 추가해줍니다.
6. README 에 테스트 툴, 스크립트를 남겨둡니다.

이런것들을 일일히 해야하나요?

• 넵, 그래도 예전보단 좋아졌다고 합니다.

테스트를 작성해서 테스트가 동작하는지 확인 해봅니다.

• Next.JS 공식문서 참고

초기 개발환경시 가이드에 따라 정확하게 해야합니다.

• 다만 왜 하는지에 대해 생각해야 합니다.
• 많은 시간을 쓸 필욘 없고 가이드에 있는데로 설정 후 이슈가 없으면 다음 단계로 넘어갑니다.
• 커스터마이징 하고 싶은 경우 가이드에 따라 제대로 동작하는지 확인 후 커스터마이징 합니다.