0042. 테스팅과 리액트 테스팅

이번 리액트 입문 연재 콘텐츠는 테스팅에 관해 개괄합니다. 프론트엔드, 리액트에서 테스팅을 학습하시려 했다면 이번 콘텐츠로 시작해보세요! 프레임워크 없는 프론트엔드 개발 스터디 참가자 모집을 이제 곧 마감해요. 서두르세요!

2024년 12월 09일 08시 32분에 발행됨

공지 프론트엔드 프레임워크 스터디 테스팅 리액트

푸딩캠프 이야기

프레임워크 없는 프론트엔드 개발 스터디 참가자 모집

스터디캠프 2기에 이어 바로 이어지는 3기는 제가 추천하는 책인 “프레임워크 없는 프론트엔드 개발”입니다. 프론트엔드 프레임워트를 뜯어보고 직접 구현해보는 내용인데, 이 책을 학습하고 나면 리액트 등 현대적 웹 UI 프레임워크/라이브러리 사용에 더 능숙해지실 겁니다.

오리엔테이션을 포함해 총 5주 동안 진행하며, 노쇼 및 당일불참 통보를 예방하는 목적으로 소정의 참가비가 필요합니다.

뉴스레터, 임시 발행 주기 안내

통탄스럽고 분노가 이는 일이 지난 주에 일어나 혼란스러운 시기를 보내고 있습니다. 정치에 참여하여 목소리를 내는 것과 일상은 분리하는 것이 옳으나 목소리를 더 내며 참여하고자 합니다. 이에 주 3회 발행하던 뉴스레터 발행 주기를 임시로 불규칙하게 발행할 것으로 예상합니다. 뉴스레터 외 이미 시작한 일은 변동없이 진행하므로 착오 없으시길 바랍니다.

다른 푸딩캠프 프로그램 중 뉴스레터에만 운영 상 변동 여지를 두는 것은 뉴스레터 발행에 가장 많은 시간이 투입되기 때문입니다. 구독자 여러분께 약속한 주 3회 발행을 지키도록 최선을 다하겠습니다.

테스팅과 리액트 테스팅

이제부터 다룰 리액트 콘텐츠는 다소 까다롭고 복잡합니다. 코드를 작성하는 건 비교적 간단하지만, 구현한 것이 의도대로 동작하는지 검증하고, 의도대로 동작하지 않을 때 문제를 해결하는 건 복잡하거나 까다롭습니다. 왜냐하면 컴포넌트의 상태와 부수효과가 섞여서 복잡도가 증가하거든요.

이를 효율과 효과있게 검증하고 문제를 해결하는 방법은 테스트 코드를 작성하는 것입니다. 구현을 하고 브라우저에서 손으로 테스트를 해도 되지만, 빠르게, 그리고 테스트하는 과정을 의도를 드러내는 좋은 방법이 테스트 자동화이기 때문입니다. 테스팅은 코드의 품질을 높여주고, 의도하지 않은 버그를 방지하며, 코드 변경 시 발생할 수 있는 리스크를 줄여줍니다.

이번 편에서는 리액트 애플리케이션 테스팅의 중요성과 종류, 그리고 Vitest를 사용하여 테스팅 환경을 설정하는 방법을 알아보겠습니다.

테스팅이 중요한 이유

소프트웨어 개발에서 테스팅은 다음과 같은 이유로 중요합니다:

버그 방지

코드를 작성하는 과정에서 사람이 실수를 하는 것은 자연스러운 일입니다. 하지만 이러한 실수가 제품에 영향을 미치지 않도록 하는 것이 테스팅의 주된 목적이죠. 테스팅을 통해 코드의 문제를 조기에 발견하고 수정할 수 있어요.특히, React 애플리케이션은 사용자 인터페이스(UI)와 상호작용이 많기 때문에 예상치 못한 동작이나 오류를 방지하기 위해 꼼꼼한 테스트가 필요합니다.

코드의 안정성 보장

애플리케이션은 시간이 지남에 따라 기능이 추가되거나 변경됩니다. 이런 변화가 기존의 코드에 영향을 미치지 않도록 테스팅이 필요합니다.리팩토링을 수행할 때, 테스트가 기존 기능의 안정성을 확인해 주는 안전망 역할을 하지요.

문서화

테스트 코드는 코드가 어떻게 동작해야 하는지를 명시적으로 보여주는 "실행 가능한 문서"의 역할을 합니다. 팀원이 코드의 의도를 이해하거나, 새로운 사람이 프로젝트에 합류할 때 테스트를 통해 코드의 사용 방법과 기대 동작을 쉽게 파악할 수 있습니다.특히 사용자 스토리와 시나리오와 대응하는 테스트 코드를 작성하는 경우, 문서로써 테스트 코드의 역할이 커집니다.

협업 효율성 향상

테스팅은 팀원들 간의 신뢰를 높여줍니다. 코드 리뷰 과정에서 테스트 결과를 확인함으로써 변경 사항이 기존 코드에 영향을 미치지 않는다는 점을 증명할 수 있지요. 테스트는 코드 품질에 대한 기준을 제공하므로, 협업 시 불필요한 논쟁을 줄이고 생산성을 높입니다.

유지보수 비용 절감

초기에 테스트를 작성하는 데 시간이 들더라도, 장기적으로는 오류를 수정하는 비용을 크게 줄일 수 있습니다.시간이 지날수록 코드에서 냄새가 나기 시작하는데, 이를 리팩토링을 하는 데 테스트 코드가 큰 역할을 합니다. 테스트 코드가 없으면 사소한 이름 변경 마저도 크게 부담이 됩니다.

테스팅의 종류

테스팅 방법은 분류에 따라 조금씩 다르지만, 기본적으로 세 가지로 분류합니다.

< 푸딩캠프, 테스팅 특강 자료 중에서. >

단위(Unit) 테스트

개별 함수, 모듈, 또는 컴포넌트가 독립적으로 예상대로 동작하는지 확인하는 테스트입니다. 리액트에서는 보통 단일 컴포넌트나 해당 컴포넌트의 특정 로직을 테스트합니다. 예를 들면, 클릭하면 컴포넌트 상태가 변경되거나 특정 콜백(callback) 함수가 호출되는지 확인합니다.

통합(Integration) 테스트

여러 컴포넌트나 모듈이 함께 동작할 때, 예상한 대로 상호작용하는지 확인합니다. 리액트에서는 부모-자식 컴포넌트 간의 데이터 전달, API 호출 결과가 UI에 올바르게 반영되는지 등을 테스트하죠.

종단(E2E) 테스트

애플리케이션의 전체 작업흐름을 사용자의 관점에서 시뮬레이션하여 테스트합니다. 리액트 애플리케이션에서는 Cypress나 Playwright 같은 도구를 사용해 사용자가 페이지를 탐색하거나 버튼을 클릭하는 등 실제 사용 시나리오를 검증할 수 있습니다. 마치 사람이 서비스를 사용하는 걸 프로그램이 흉내내듯이 동작합니다. 또는 매크로 프로그램처럼요.

Vitest 소개

Vitest는 빠르고 간결한 테스팅 프레임워크로, 리액트로 개발하며 테스트를 작성하고 실행하는 데 적합합니다. Jest와 비슷한 사용성을 제공하지만, 더 빠른 속도, 간결한 설정과 사용법이 장점이지요. 또한 Jest와도 높은 수준으로 호환도 되어 많은 Jest 자료를 참고할 수 있어요.