프론트엔드 테스트 종류와 비교

테스트 피라미드

테스트 코드

테스트 코드를 왜 작성할까요?

테스트 코드를 작성해야하는 이유는 여러가지가 있습니다.

첫째 버그를 미리 발견할 수 있기 때문입니다.

테스트 코드를 작성하면 코드를 실행하기 전에 버그를 미리 발견할 수 있고 예상치 못한 사이드 이팩트를 찾아내고 버그를 수정함으로써 프로덕트와 내 코드를 더 안전하게 만들수 있습니다.

둘째 리팩토링과 유지보수에 유리합니다.

테스트 코드를 작성하면 리팩토링 과정에서 코드를 변경 할때 기존의 기능들이 올바르게 동작하는지 확인할 수 있어 코드의 유지보수성을 높이고 변경으로 인한 오류를 방지하는데 도움이 됩니다.

셋째 팀 협업 강화에 도움이 됩니다.

테스트 코드를 작성하면 코드의 안전성을 높여 팀내 협업을 강화에 도움이 됩니다.

---

테스트 코드 종류

• 유닛 테스트
  • 가장 작은 단위(Unit)을 테스트 하는 것입니다. 가장 작은 단위는 함수, custom hook, 컴포넌트 자체가 될 수도
    있습니다.
• 통합 테스트
  • 유닛 테스트에서 사용한 단위들의 상호작용에 대한 테스트입니다. 단위들의 상호작용으로 간단한 시나리오를 테스트 해볼 수 있습니다.
• E2E 테스트
  • End to End 테스트의 약자로 처음부터 끝까지 테스트 하는걸 말하는데 통합 테스트에서 보다 더 복잡한 플로우를 다룹니다. 실제 브라우저나 디바이스에서 실행되어 실제 사용자가 상호작용 하는 것과 유사한 환경에서 테스트합니다.

예) 유저가 아이디와 비밀번호를 입력하고 로그인하는 과정을 테스트한다고 가정해보겠습니다.

테스트 할때는 가짜 객체인 모킹함수를 실제 객체처럼 사용하여 테스트 하게 됩니다.

단위 테스트는 로그인의 onChange 핸들러나, validation check, 버튼을 눌렀 을때 onClick 또는 onSubmit 함수가 올바르게 동작하는지 확인합니다.

통합 테스트는 아이디와 비밀번호를 입력하고 버튼을 클릭했을 때 서버로 데이터가 전송되는지, 서버에서 올바른 응답을 반환하는지 등을 확인합니다.

E2E 테스트 E2E 테스트는 실제 브라우저에 아이디와 비밀번호를 입력하고 버튼을 클릭하여 다른 페이지로의 이동까지 시나리오로 테스트 할 수 있습니다.

프론트엔드 테스트 툴 종류와 비교

• Jest
  • Jest는 페이스북에서 만든 JavaScript 테스트 프레임워크 입니다. 자바스크립트 외에도 타입스크립트도 지원하고 있습니다.
  • 테스트 러너 내장하고 있습니다. 테스트 러너는 테스트 코드의 실행, 결과보고, 환경구성, 결과 리포팅(커버리지)가 있습니다.
• Mocha
  • Mocha는 NodeJs 테스트를 위해 나온 라이브러리이지만 현재는 JavaScript 전반적인 테스트를 위한 유연하고 확장 가능한 테스트 프레임워크 입니다.
  • 테스트 러너로만 사용됩니다. Jest에서 이미 기본적으로 구성되어 있는 어센셜을 내장하고있지 않기 때문에 Mocha 에서는 Chai 와 Sinon 과 같은 라이브러리를 별도로 사용하여 구성해야합니다.
  • Set up 과정이 Jest에 비해 복잡하다는 단점이 있지만 추가 라이브러리에 대한 확장성과 테스트 과정은 Jest 보다 유연하다는 장점이 있습니다.
• React Testing Library(RTL)
  • 컴포넌트 내부의 내 코드를 테스트 하는것이 아니라 렌더링 결과에 집중하여 사용자 시점에서 실제 사용자가 이용하는 것과 같은 방식으로 컴포넌트를 테스트합니다.
  • 테스트 러너 위에서 동작하며 Jest 또는 Mocha 와 같이 사용해야합니다.
• Enzyme
  • RTL와 마찬가지로 리액트 컴포넌트를 테스팅하는 라이브러리입니다.
  • RTL와 가장 큰 차이는 props 와 state 에 직접적인 접근이 가능하기 때문에 컴포넌트 내부구현의 테스트에 집중되어있습니다
  • shallow render 를 통해 가상의 렌더링을 통해 컴포넌트 내부의 테스트를 빠르게 한다는 점에 RTL보다 속도면에서 빠르다고 할수 있습니다.
• Cypress
  • 브라우저 내에서 테스트를 직접 실행하는 방식으로 합니다.
  • 과거 chromium 기반의 브라우저만 지원했으나 현재는 firefox 도 지원하고 있고 다른 브라우저의 지원도 계획되어 있습니다.
  • 웹 테스트만을 위해 설계 되어 모바일 앱이나 테스트탑 같은 플랫폼에 대한 지원이 제한적입니다.
  • mocha 기반의 테스트러너를 사용합니다.
• Playwright
  • chromium 이외에도 firefox, webkit과 같은 다양한 브라우저를 지원하기 때문에 크로스 브라우징 테스트를 수행할 때 유리합니다.
  • cypress 와 달리 웹, 앱, 데스크 탑 모두 지원하기 때문에 크로스 플랫폼 테스트에 유용합니다.
  • mocha, jest, jasmine 등의 테스트 러너를 사용할 수 있습니다.
  • 아직 cypress 에 비해 커뮤니티가 적은 편입니다.