이번에는 새로운 테스트 도구에 대해서 알아보려고 한다.
아티클을 읽어보던 중에 흥미로운 내용이 있어서 글을 아니 쓸 수가 없었다.

오늘의 주인공은 얼마 전 넷플릭스에서 개발한 테스트 도구 SafeTest다.

SafeTest

리액트를 이용한 프로젝트에서 Cypress를 활용해 E2E 테스트를 진행했던 기억이 있다.
Cypress 혹은 타 테스트 도구들과 SafeTest는 어떤 차이가 있고 어떻게 동작하는지도 간단하게 알아보자

SafeTest란?

넷플릭스에서 개발한 테스트 도구로 기존의 다양한 테스트 도구(RTL, Cypress, playwright)들이 갖는 가려운 부분을 시원하게 긁어주는 따끈따끈한 녀석이다.
그렇다면 기존의 테스트 도구에는 어떤 아쉬운 점이 있었는지 알아보자.

기존 테스트 도구들의 허점

• react-testing-library

  • CORS 설정 또는 GraphQL 호출을 테스트할 수 없음
  • 버튼의 클릭 기능에 영향을 미치는 z-index 문제를 파악하기 어려움
  • 테스트 작성 및 디버깅이 복잡하고 직관적이지 않음

• Cypress/Playwright

  • 사용자 정의 네트워크 레이어 API 재작성 규칙을 구현하지 않으면 대체 API 엔드포인트를 호출하기 어려움
  • 스파이/모의 객체에 대한 어설션(assertion)을 수행하거나 앱 내에서 코드를 실행할 수 없음
  • 다크 모드 같은 기능을 테스트하려면 테마 전환 스위치를 클릭하거나 오버라이드할 로컬스토리지 메커니즘을 알아야함
  • 앱의 일부를 테스트할 수 없음
    • ex) 버튼을 클릭하고 60초 타이머를 기다려야만 특정 컴포넌트가 표시되는 경우, 테스트는 이러한 작업을 수행해야 하며 적어도 1분 이상 소요됨

직접 피부로 와닿는 부분들도 있지만 이해하기 어려운 부분이 더 많다.
아직 테스트를 깊이 활용하고 있지 못하고 있는 듯하다.
열심히 하자...

---

효자손 SafeTest

위의 허점들을 넷플릭스는 SafeTest를 이용해서 어떻게 긁었는지 확인해 보자.

• SafeTest 주요 아이디어

  • 애플리케이션 부트스트래핑 단계에서 테스트를 실행하기 위한 훅을 삽입하는 코드 스니펫을 만드는 것!
  • 테스트를 실행할 때만 지연 로딩을 활용하여 테스트를 동적으로 로드하기 때문에 작동 방식이 앱의 정상적인 사용에 실제로 영향을 미치지 않는다.
  • 설정이 완료되면 Playwright를 사용하여 일반적인 테스트를 실행할 수 있으므로 테스트에 대해서 원했던 만큼 이상적으로 브라우저를 제어할 수 있다.

• SafeTest 흥미로운 기능

  • 노드 테스트 서버를 실행할 필요 없이 특정 테스트에 딥 링킹(Deep Linking)
  • 브라우저와 테스트(노드) 컨텍스트 간에 양방향으로 통신 가능
  • Playwright에서 제공하는 모든 DX 기능에 접근 가능
    • (단, @playwright/test와 함께 제공되는 것은 제외)
  • 테스트를 비디오로 녹화하거나, 트레이스를 표시하거나, 다양한 페이지 선택자/액션을 시도하기 위해 페이지 일시 정지 가능
  • 브라우저 내 호출의 스냅샷과 일치하는 노드에서 브라우저의 스파이에 대한 어설션 수행 가능

오늘은 넷플릭스에서 개발한 테스트 도구 SafeTest에 대해서 알아보고 정리해 봤다.
테스트 도구는 Cypress를 사용해 봤지만 다음에 진행하는 프로젝트에는 SafeTest를 이용해 보는 것도 최신 기술을 적용해 보는 좋은 경험이 될 것 같다.

---

refer

• 개발자 Github Page
• 아티클 url