<aside> ⭐ 학습목표

• 테스트코드를 활용한 효율적인 리팩토링
  • 무엇을 테스트 할 것인가?
  • 어떻게 테스트 할 것인가?
  • 프론트엔드 TDD </aside>

<aside> 💬 TIL

• 테스트는 UI 테스트가 아닌 “사용자 시나리오”에 집중한 테스트를 한다.
• 단위테스트, 통합테스트, E2E테스트에 대해 간략하게 알아보았다. 이론적인 내용일 뿐, 실무적인 지식은 없는 상태이지만 더 공부해보자..!
• 요즘 채용공고를 보면 테스트코드 작성에 대한 우대사항도 꽤 있었기 때문에 테스트코드를 작성하는 방법에 대해서 학습하고 싶은 마음은 있었는데, 어디서 부터 무엇으로 시작해야 할지 잘 모르던 상태였다. 이번 프리온보딩 강사님이 관련 강의를 내셨다고 해서 할인할 때 구매를 했다. 보면서 조금이나마 익숙해지도록 해봐야지.

지난 시간의 상태관리 툴에 이어 이번에는 테스트 코드에 대한 이야기를 했다. 요즘 관심있는 또 다른 주제인 테스트코드에 대한 강의를 하니 더 흥미롭고 재미있었다.

관심을 가지고 있지만, 실제로 테스트코드를 작성해본 적도 없고 아직 공부해본적도 없어서 여러 용어들을 들으며 많이 헷갈렸다. 관련 툴이나 라이브러리도 생각보다 많았고, 사용자의 선호도에 따라 어떤 라이브러리로 테스트를 할지 선택한다는 것도 지금의 나에게는 어렵게 느껴지는 듯했다.

따라서 아래 내용은 강의자료 기반의 내용이기는 하지만 테스트 도구 같은 경우는 정리한 내용들이 맞는 내용인지는 따로 더 공부를 해봐야 알것 같다.

</aside>

📖 table of contents

1. 무엇을 테스트 할 것인가?

▪️ UI 테스트는 진행하지 않는다.

• 로그인 화면에서 비밀번호 input과 버튼 사이의 거리를 재는 것은 무의미하다.

  → 기기의 크기에 따라 달라질 것이기 때문

• 컴포넌트 렌더링 순서도 무의미

  → JSX는 선언한대로 렌더링 되며, 인풋이 버튼 위에 존재하는지는 테스트할 필요가 없다.

▪️ 요구사항의 “사용자 시나리오"에 집중해야 한다.

1. 아이디 비밀번호를 입력했을 때 버튼이 활성화 되는가?
2. 하지만 위보다 중요한것은
   1. 로그인이 성공하는가?
   2. 로그인이 실패하는가?
3. 즉, “기능”에 중점을 두고 테스트를 해야한다.

$$ •\;•\;• $$

<로그인 화면에서 버튼 테스트 🧐>