[서평] 프런트엔드 개발을 위한 테스트 입문

 

책에 대한 이야기를 하기 이전에 배경을 설명하자면 나는 프론트엔드 개발자 취준생이다.

 

신입으로 발돋움하기 위하여 많은 개발자 취준생들이 그렇듯이 채용 공고를 보며 '아 이런 기술 스택을 요구하는구나', '이런 거 공부해야 하는구나' 하고 도움을 얻곤 하는데 여러 가지 중에서도 가장 생소하게 느껴지는 스택이 바로 테스트 도구였다. Jest, Cypress,... 어.. 뭐.. 조금은 알 것 같기도 한데 그게 뭔데? 내가 어떻게 공부해야 하는데? 어째 접할수록 막막하기만 했다.

 

어쩔 수 없이 후순위로 밀리면서 (실제로도 다른 스택들과 비교하여 우선순위가 낮긴 하다. 신입일 때보다는 연차가 있을 때 요구되는 경우가 잦았기 때문) 테스트에 대해서 알아가기 어려웠는데, 이 때 접하게 된 것이 아래에서 소개할 <프런트엔드 개발을 위한 테스트 입문>이다.

 

 

 

<프런트엔드 개발을 위한 테스트 입문>

요시이 다케후미 지음
원밀리언라인즈코딩(배언스) 옮김
제이펍 출판

 

 

책의 서두에서 먼저 이 책이 전달하고자 하는 내용이 나온다.

 

현재 프론트엔드에서의 테스트에 대한 관점은 그다지 특별하지 않다. 프론트엔드에서는 특히나 테스트 방법이 너무 많고 언제, 어떤 테스트가 필요한지 판단하기 어렵기 때문. 그렇기 때문에 이 책은 독자에게 다양한 테스트 도구를 하나씩 알려주면서 최적의 테스트 도구를 선택할 수 있는 길잡이가 되는 방향을 선택했다.

 

 

 

책은 전반부와 후반부로 나누어진다.앞에서는 테스트 코드를 처음 작성하는 개발자를 대상으로 테스트의 목적과 방법 등 이론 위주의 설명과 단위 테스트를 실시하고, 뒤에서는 React와 Next.js로 개발한 애플리케이션 예제를 갖고 테스트 코드 작성하는 방법을 학습해 실무와 가까운 경험을 제공한다.

 

 

• Chapter 1. 테스트의 목적과 장애물
• Chapter 2. 테스트 방법과 테스트 전략

 

1장에서는 테스트를 왜 해야 하는 지와 같은 근본적인 물음과 답변을 제공한다. 개인적으로는 가장 인상 깊은 챕터이자 잘 구성한 챕터라고 생각한다. 이 의문을 온전히 이해해야만 앞으로 펼쳐질 설명을 받아들일 수 있다고 생각하는데 저자도 나와 같은 생각이었는지 꽤나 정성스럽게 또 쉽게 서술했다. 환기시켜 주는 그림 삽입은 덤이다.

?? : 서비스 품질이 최악이다!

 

 

2장은 조금 더 전문적인 이론으로 프론트엔드 개발에 있어 테스트의 종류가 어떻게 나뉘는지를 설명한다.

• 범위(레벨) 기준 - 정적 분석 / 단위 테스트 / 통합 테스트 / E2E 테스트
• 목적 기준 - 기능 테스트(인터랙션 테스트) / 비기능 테스트(접근성 테스트) / 시각적 회귀 테스트

그리고 각각의 테스트의 비중을 어떻게 두어야 할지와 같은 전략에 대해서 서술한다.

 

 

 

• Chapter 3. 처음 시작하는 단위 테스트
• Chapter 4. 목 객체
• Chapter 5. UI 컴포넌트 테스트
• Chapter 6. 커버리지 리포트 읽기

 

3장에서부터는 단위 테스트에 대한 본격적인 설명을 위해 예제가 등장한다.

테스트 프레임워크로는 Jest가 사용되는데, Jest가 무엇인지 따로 설명하기보다는 바로 간단한 예시를 보여줘서 이해시키는 맥락이다. 수학 연산을 테스트하는 방법부터 시작해서 각 데이터 타입에 따른 접근하는 방법과 비동기 처리 등 간단한 예제들을 보여준다.

 

테스트 예제 코드와 그에 대한 부가 설명

 

4장은 실제 웹 API와의 통신을 통해 취득할 데이터를 대신하여 사용하는 목 객체에 대한 이야기이다. 웹 API와의 통신을 할 때에는 네트워크 오류와 같은 실패 가능성이 존재하기 때문에 성공과 실패 케이스 모두를 테스트해야만 한다. 이를 위해 사용하는 것이 실제 API 응답을 모방한 목 객체다. 이 목 객체를 이용해서 테스트하는 방법에 대해서 예제와 함께 설명한다.

 

이어서 5장은 프론트엔드의 주요 개발 대상인 UI 컴포넌트를 테스트하는 내용이다. UI 컴포넌트는 버튼과 같은 작은 UI 컴포넌트를 조합해서 화면 단위의 UI를 완성하고, 애플리케이션을 만든다. 즉, 중간 크기의 UI 컴포넌트에서 문제가 생기면 애플리케이션 전체에 문제가 생기기 때문에 테스트를 작성한다. 주로 '의도한 대로 작동하고 있는가'와 '문제가 생긴 부분이 없는가'를 확인한다. 

 

 

 

• Chapter 7. 웹 애플리케이션 통합 테스트
• Chapter 8. UI 컴포넌트 탐색기

 

7장에서부터는 Next.js 애플리케이션 예제를 사용하며 통합 테스트를 학습한다. Jest를 활용한 단위 테스트와 통합 테스트, 스토리북을 활용한 UI 컴포넌트 테스트, Next.js 고유 기능을 활용한 테스트 등을 포함하고 있어 실무와 가까운 테스트 코드 작성 경험을 제공한다. 

 

최근 Next.js로 프로젝트를 진행한 경험이 있었기에 여기에선 이런 테스트를 진행하는구나 하고 조금 더 직접적으로 체감하고 익숙함을 느끼는 챕터이기도 했다. React Hook Form 소개에서는 살짝 반갑기도 했다.

 

 

8장은 UI 컴포넌트 테스트를 위한 스토리북에 대한 내용이다. 디자이너와의 협업 및 UI 컴포넌트 관리 측면에서 편하다고 익히 들어왔는데 테스트 관련 서적에서 한 챕터로 등장하는 테스트 도구라는 인식은 못했었기에 개인적으로는 의외의 만남이였다. 단순히 협업 도구가 아닌 테스트에 활용하는 최근 사례가 많아졌다고 한다. 스토리북의 기본 개념과 사용법, 그리고 테스트에 어떻게 활용하는 지를 다룬다.

 

 

 

• Chapter 9. 시각적 회귀 테스트
• Chapter 10. E2E 테스트

9-10장은 난이도가 다소 있어 가볍게 눈으로만 훑었다. 챕터 2 테스트의 분류에서 가볍게 다루었던 두 테스트에 대한 설명과 예시를 담고 있으며 최종적으로 최적의 테스트 전략을 선택하기 위한 준비를 마치게 해준다.

 

 

 

 

<프런트엔드 개발을 위한 테스트 입문> 책은 앞서 말한 것과 같이 크게 두 파트로 분리된다.

 

전반부에서는 '입문'이라는 책의 이름에 맞게 굉장히 섬세한 시각으로 테스트 그 자체에 대해서 다룬다. 무엇을 위해 진행하는 테스트인지와 같은 근본적인 물음에서 시작해 테스트의 종류, 그리고 단위 테스트 실습까지. 처음 테스트를 접하는 독자가 무리없이 따라올 수 있도록 점진적인 설계가 되어있다. 이후 후반부에서는 배운 바를 실무에서도 적용해볼 수 있도록 하기 위해 실제 실무와 비슷한 환경을 제공하고 통합 테스트 코드를 따라서 작성해보도록 이끈다.

 

이 책에서 첫 번째로 인상 깊었던 포인트는 '입문자'의 시선에서 테스트의 시작을 몹시 잘 이끌어준다는 점이고, 두 번째는 이 입문자를 '숙련자'로 만들기 위해 두 가지 예제를 준비해서 성장을 이끌어낸다는 점이었다. 단 한 권이지만 실용적으로, 또 체계적으로 만들어진 구성임이 느껴졌다.

 

테스트 입문자에 해당하는 나의 경우는 이 책을 통해서 기초를 제대로 잡아볼 수 있었고 후반부를 재정독 함으로써 점차 숙련자로 거듭날 수 있지 않을까 기대가 되는 책이었다. 테스트에는 관심이 있지만 정작 제대로 공부해보기에는 어려움을 겪는 나와 같은 처지의 입문자에게 추천하고 싶다.

 

---

 

서평 작성을 마무리하기까지 시간이 좀 걸렸는데 평소 서평을 작성해본 경험이 없어 어떻게 써야할 지 고민이 됐기 때문.. 사실 독후감도 겨우겨우 작성하는 편인데..

 

보는 입장에서는 어떨 지 걱정이지만 그래도 최대한 내가 느낀 내용과 공유하고 싶은 부분을 위주로 작성해봤다.

간간히 내가 작성한 글을 다시 읽어보며 다듬어야 할 듯 하다.