테스트를 더 효율적으로 할 수 없을까?
효율적인 테스트는 어떤 방식으로 접근해야할까?
Last updated
효율적인 테스트는 어떤 방식으로 접근해야할까?
Last updated
데이터 시각화 편집툴인 Builder R3 의 출시를 앞두고, 기능에 대한 검증을 하기 위해 v1 기능리스트를 기반으로 내가 작성한 테스트 시나리오를 기준으로 우리팀에서 먼저 테스트를 진행하였다
테스트를 진행하다 보니, 여러가지 문제에 부딪혔다. 사람마다 테스트의 결과가 달랐고, 테스트 결과에 자신의 주관이 들어갔다
회사에 전문 기획자가 없었고, 각 기능에 대하여 개발자들이 정의하고, 기획한 내용들이 많아서 이런 내용들이 모두 공유되지 않았기 때문에 이런 문제점들이 발생하였다.
그리고 각 테스트를 진행하는 사람들의 환경이 너무 달랐고, (OS, 브라우저 등등) 업무 생산성이 떨어진다는 느낌을 받았다.
회사에서 Jest 와 E2E 자동화 테스트 툴을 사용하여 테스팅을 했던 사례가 없어서, PlayWright 나 Cypress 같은 툴을 활용하여 자동화 테스트를 사용해보고 사내 테스트 효율성을 더 극대화 하고 싶었다.
https://playwright.dev/ https://www.cypress.io/
테스트 피라미드는 세 가지 레이어로 나뉜다:
1. 유닛 테스트(Unit Tests) 2. 통합 테스트(Integration Tests) 3. 엔드 투 엔드 테스트(End-to-End Tests)
각각의 테스트가 수행하는 역할이 다르므로 균형 잡힌 테스트 전략을 통해 효율성을 극대화할 수 있다.
• 유닛 테스트: 작은 단위의 코드(함수, 컴포넌트)를 테스트하며 빠르고 신뢰할 수 있다. 유닛 테스트는 전체 테스트의 70~80% 정도를 차지하는 것이 바람직하다.
• 통합 테스트: 여러 유닛이 함께 작동하는 방식을 검증한다. 모듈 간의 의존성을 확인하고 버그를 미리 발견하는 데 유용하다.
• 엔드 투 엔드(E2E) 테스트: 실제 사용자가 경험하는 플로우를 테스트하며, 애플리케이션이 요구 사항을 충족하는지 검증한다. 가장 시간이 많이 걸리므로 최소화해야 한다.
각 테스트 단계마다 적합한 도구를 선택하는 것이 효율적인 테스트의 핵심이다.
• 유닛 테스트: Jest와 Mocha 같은 도구가 적합하다. Jest는 빠른 실행 속도와 직관적인 API 덕분에 많이 사용된다.
• 통합 테스트: Testing Library를 이용해 실제 DOM 조작을 최소화하고, 사용자 관점에서 테스트를 작성할 수 있다.
• 엔드 투 엔드 테스트: Cypress나 Playwright는 실제 브라우저 환경에서 애플리케이션의 동작을 테스트하는 데 적합하다. 이 도구들은 간단한 설정과 빠른 실행 속도를 제공한다.
테스트를 수동으로 실행하는 것은 매우 비효율적이므로 자동화가 필수적이다. 테스트 자동화를 통해 변경사항을 커밋할 때마다 자동으로 테스트가 실행되도록 설정하여, 코드의 품질을 꾸준히 확인할 수 있다.
• CI/CD 파이프라인에 통합하여 코드를 푸시할 때마다 테스트가 자동으로 실행되도록 설정하면, 잠재적인 오류를 초기에 발견할 수 있다.
• Git Hooks(예: Husky)를 사용하여 커밋 전 로컬에서 자동으로 테스트를 실행할 수도 있다.
테스트 커버리지 도구(예: Istanbul이나 Jest 내장 기능)를 사용해 코드의 어떤 부분이 테스트되고 있는지 측정해야 한다. 그러나 100% 커버리지를 목표로 하기보다는 중요한 로직과 경계 조건을 충분히 테스트하는 데 중점을 두는 것이 바람직하다.
외부 API나 데이터베이스 같은 의존성을 테스트할 때는 실제 자원을 사용하지 않고 모의 객체(Mock) 또는 **스텁(Stub)**을 사용해 테스트 속도를 높이고 의존성을 줄일 수 있다. 이를 통해 코드의 특정 부분만 집중적으로 테스트할 수 있다.
테스트 코드가 반복적이면 유지보수가 어렵고 시간이 많이 걸리므로, 공통된 테스트 로직은 헬퍼 함수나 공통 설정 파일로 분리하는 것이 좋다. 테스트의 중복성을 줄이면 테스트 속도도 개선된다.
React와 같은 프레임워크에서는 상태 관리와 훅(Hooks)의 동작을 제대로 검증하는 것이 중요하다. Testing Library와 같은 도구를 사용해 사용자가 보는 화면과 상호작용을 중심으로 테스트를 작성하는 것이 더 자연스러운 테스트를 만들 수 있다.
엔드 투 엔드 테스트는 실제 사용자의 행동을 기반으로 설계되어야 한다. 비즈니스 로직을 지나치게 고려한 테스트보다는, 사용자가 겪을 가능성이 있는 주요 경로를 테스트하는 것이 중요하다.
지나치게 구체적인 테스트는 코드가 약간만 변경되어도 쉽게 깨질 수 있다. 특히 UI 관련 테스트에서는 구현 세부 사항보다 기능적 요구 사항을 중점적으로 테스트하는 것이 유지보수에 유리하다.
테스트가 너무 오래 걸리면 개발 과정에서 자주 실행하기 어렵다. 따라서 테스트를 빠르게 실행할 수 있도록 신경 써야 한다. 병렬 실행이나 테스트 분할을 사용하면 테스트 시간을 줄일 수 있다.
효율적인 프론트엔드 테스트는 코드의 품질을 보장하고 유지보수를 용이하게 하는 중요한 요소다. 올바른 도구 선택, 적절한 테스트 전략, 자동화 도입은 프론트엔드 프로젝트에서 테스트의 효율성을 극대화하는 방법이다. 우리 팀은
