테스트란?

• 작성한 코드가 잘 작동하는지 검증하는 작업입니다.

왜 해야할까?

• 프론트엔드에서 기능이 잘 작동하는지 확인하는 가장 기본적인 방법은 직접 마우스로 클릭해보고, 키보드로 입력해보며 구현한 기능을 직접 사용해보는 것입니다. 그런데 일일이 모든 기능을 확인하는 것은 정말 번거로운 일입니다.
• 그래서 우리는 테스트 코드를 작성합니다. 테스트 코드는 구현한 기능을 대신 검증해주기 때문에, 사람이 일일이 번거로운 확인 작업을 하지 않아도 됩니다.
• 한 번 작성한 코드가 절대 변경되지 않는다면, 굳이 테스트 코드를 작성할 이유는 없을 것입니다. 하지만, 실제로 코드는 계속해서 변경됩니다. 코드가 변경될 때마다 기능이 정상적으로 작동하는지 일일이 확인해보는 것은 어려운 일입니다. 테스트가 있으면 변경이 두렵지 않습니다.

TDD란? (Test Driven Development, 테스트 주도 개발)

• TDD란, 테스트를 먼저 작성하고 기능을 개발하는 방식을 말합니다.
• TDD는 Red, Green, Refactor 세 단계로 나뉩니다.
  1. Red: 실패하는 테스트 코드를 작성한다.
  2. Green: 테스트를 통과하는 코드를 작성한다.
  3. Refactor: 리팩토링하고 코드를 개선한다.
• Green 단계에서는 빠르게 테스트 코드를 통과시키기 위해 수단과 방법을 가리지 않고 코드를 작성하는 것이 좋습니다. HTML 태그도 신경 쓰지 않는 식으로요!
• 민수님이 공유해주신 TDD가 가능하다는 것을 보여드립니다. 라는 영상 앞의 5분 정도를 보면 어떤 식으로 TDD를 진행하는지 알 수 있어요.

테스트의 종류

• 단위 테스트(Unit test)
  • 하나의 모듈에 대한 가장 작은 단위의 테스트입니다.
  • 예시
    • 컴포넌트가 잘 렌더링된다.
    • 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다.
• 통합 테스트(Integration test)
  • 단위 테스트가 하나의 모듈에 대한 테스트라면, 통합 테스트는 여러 모듈을 합친 기능에 대한 테스트입니다.
  • 단위 테스트와 달리 여러 파일을 불러와서 테스트할 될 수 있습니다. 한 파일에서 여러 함수들을 함께 불러와 사용하는 것 또한 통합 테스트입니다.
• E2E 테스트(End-to-End test)
  • 마치 사용자가 사용하는 것처럼 시나리오를 짜서 기능을 테스트하는 것입니다.
  • Cypress로 할 수 있습니다.

언제 해야할까?