프론트엔드에서 테스트 코드 작성하기 (with. Jest)
date
Dec 17, 2023
slug
jest
status
Published
tags
Test
summary
type
Post
코드 블록이 보이지 않는 경우, 페이지를 새로고침해주세요.
시작하며
프로젝트를 진행하면서, 기능 개발 및 유지 보수하는 과정에서
______ 에 대한 고민이 있었습니다.- 기능의 복잡한 히스토리 추적하기 어렵다.
- 코드 수정에 따른 사이드 이펙트 추적하기 어렵다.
부채로 쌓이면서 발생하는 문제점들을 해결하기 위한 방법으로 두 가지 방안을 고안했습니다.
- 문서화
- 테스트 코드
사내에서 문서화가 제한적인 상황이었기 때문에, 이 문제를 테스트 코드를 활용하여 해결하고자 했습니다. 그래서 첫걸음으로, 가장 작은 기능 단위를 검증하는 유닛 테스트를 위한 테스트 코드 작성을 결정했습니다.
Jest
Jest는 JavaScript에서 널리 사용되는 테스팅 프레임워크로, 테스트를 작성하고 실행하는데 필요한 여러 기능을 제공합니다.- Test Runner:
Jest의 핵심 부분으로, 테스트 케이스를 찾고 실행하는 역할을 합니다.
- Test Matcher:
Jest가 제공하는 일련의 'expect' 함수로 테스트 결과를 평가하는 데 사용됩니다.
- Test Mock:
실제 구현을 대신해 특정 행동을 시뮬레이션 하기 위해 모의 함수나 객체를 사용할 수 있습니다.
프로젝트에서 유닛 테스트를 적용할 부분을 선정하는 과정에서, 변경이 잦은 UI 요소들보다는 핵심 로직에 적용하기로 결정했습니다.
특히, 함수의 반환값에 따라 조건부 렌더링을 테스트하기로 했습니다. 이를 위해, "
A 는 B 상태일 때 true를, 그렇지 않을 때 false를 반환한다"는 가정을 테스트 케이스로 정의했습니다.마치며
과거에는 테스트의 중요성을 충분하게 인식하지 못했습니다. 하지만 프로젝트가 진행하면서, 코드의 안정성을 유지하고 예상치 못한 버그를 사전에 방지하기 위해서는 테스트가 필요하다는 것을 깨달았습니다.
이러한 인식을 바탕으로 팀원들을 설득해 나가며, 프로젝트의 핵심 부분에 테스트 코드를 단계적으로 작성해나갈 예정입니다. 이 글이 여러분의 프로젝트에 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
