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

이 서평은 제이펍의 <IT 전문서 리뷰어 3기> 활동의 일환으로 출판사로부터 책을 제공받아 작성되었습니다.

 

 

product.kyobobook.co.kr

프런트엔드 개발을 위한 테스트 입문 | 요시이 다케후미 - 교보문고

 

배언수님의 옮긴이 머리말에 따르면, 일본에서 근무할 당시 실무에서 테스트 코드를 작성하는 팀이 많지 않았다고 한다.

 

UI 개발 시 테스트 코드 작성이 어렵다는 막연한 편견으로 인해 많은 개발자들이 이를 포기하곤 한다.

 

하지만 충분한 지식을 바탕으로 불필요하다고 판단하는 것과 막연한 생각으로 결론 내리는 것은 큰 차이가 있다.

 

테스트 코드는 비용 절약을 위해 자주 변하지 않는 부분에 한정해 회귀 테스트를 면제하는 용도로 사용할 수도 있다.

 

새로 들어온 팀원에게 보여줄 사양서로 활용할 수도 있으며, 리팩터링 시 초보적인 실수를 줄이는 용도로도 사용할 수 있다.

 

각자의 상황에 맞는 선택지로 테스트 코드를 바라보고 개발 옵션을 확장한다는 관점으로 접근하면 좋을 것 같다.

 

대상 독자는 아래와 같다.

• 프론트엔드 개발 경험이 없는 개발자
• 테스트 코드 작성 경험이 없는 개발자
• 데이터베이스를 포함한 E2E 테스트 작성 경험이 없는 개발자

 

5장부터는 Next.js로 개발한 예제를 사용하기 때문에 프론트엔드 개발에 익숙하지 않다면 미리 관련 내용을 학습한 후 읽는 것이 좋다.

 

 

테스트 목적과 장애물

이 책은 프론트엔드에서 사용하는 다양한 테스트 방법을 다룬다.

 

자바스크립트(또는 타입스크립트)로 테스트코드를 작성하는 방법뿐만 아니라 테스트의 시기와 유형에 대해서도 알아본다.

 

이 책에서는 아래의 테스트 방법들을 다룬다.

• 함수 단위 테스트
• UI 컴포넌트와 단위 테스트
• UI 컴포넌트와 통합 테스트
• UI 컴포넌트와 시각적 회귀 테스트
• E2E$_{End-to-End}$ 테스트

 

또한 예제에서는 아래와 같은 라이브러리와 프레임워크를 사용한다.

• 리액트$_{React}$: UI 컴포넌트 라이브러리
• Zod: 유효성 검사$_{validation}$ 라이브러리
• React Hook Form: 리액트에서 폼$_{form}$을 쉽게 다루게 해주는 라이브러리
• Next.js: 리액트를 기반으로 만든 웹 애플리케이션 프레임워크
• 프리즈마${Prisma}$: 데이터베이스에 접속하는 객체 관계 매핑${ORM}$ 라이브러리

 

예제를 이해하는 데 필요한 정도로만 설명하고, 더 자세한 사용법은 공식 문서를 참고하면 된다.

 

테스트 도구는 다음과 같다.

• 제스트${Jest}$: CLI 기반 테스트 프레임워크${testing \space framework}$ 및 테스트 러너(테스트 실행기)
• 플레이라이트: 헤드리스 브라우저를 포함한 테스트 프레임워크 및 테스트 러너
• reg-suit: 시각적 회귀 테스트 프레임워크
• 스토리북: UI 컴포넌트 탐색기

이 도구들 또한 테스트 코드를 작성하면서 어떻게 좋은 테스트를 작성할 수 있는지 중점적으로 살펴본다.

 

위 기술 스택들에 관심이 있다면 이 책을 읽어봐도 좋을 것 같다.

 

 

테스트 방법과 테스트 전략

테스트 작성법만을 우선적으로 학습하는 것은 상황에 적합한 테스트 작성을 어렵게 만들 수 있다.

 

프론트엔드 테스트의 범위와 목적에 대한 이해가 선행되어야 테스트 자동화의 이점을 충분히 활용할 수 있다.

 

본 장은 책 전체를 읽은 후 내용을 정리하는 차원에서 다시 읽는 것이 권장된다. 테스트 작성법을 숙지한 후 다시 읽으면 프론트엔드 테스트의 전체적인 흐름을 더 잘 이해할 수 있을 것이다.

 

테스트 작성 시 주의해야 할 점으로는 테스트 범위의 명확한 설정, 검증 목적에 부합하는 테스트 타입 선택, 각 테스트 타입에 적합한 도구의 사용(단일 또는 조합) 등이 있다.

 

책에서 설명하는 다양한 테스트 방법은 몇 가지 계층으로 분류될 수 있다. 실제 제품과 유사한 상층부 테스트의 증가가 더 나은 테스트 전략으로 보일 수 있으나, 이는 상당한 시간과 비용을 요구한다.

 

이러한 비용은 개발팀에 중대한 영향을 미치므로 충분한 논의 후 진행되어야 한다. 테스트 전략 수립 시 참고할 수 있는 판단 기준과 사례들이 책에 포함되어 있어 참고하면 좋을 것 같다.

 

 

처음 시작하는 단위 테스트

3장부터 6장까지의 예제는 하나의 프로젝트 내에서 실행해볼 수 있도록 Github에 코드가 준비되어 있다.

 

https://github.com/frontend-testing-book-kr/unittest

GitHub - frontend-testing-book-kr/unittest

 

테스트는 제스트가 제공하는 API인 test 함수로 정의한다. test 함수는 두 개의 매개변수를 받는다.

• 테스트명: 테스트 내용을 잘 나타내는 제목
• 테스트 함수: 단언문 작성

 

단언문은 검증값이 기댓값과 일치하는지 확인하는 문$_{statement}$이다. expect 함수와 이에 덧붙이는 매처$_{matcher}$로 구성된다. 제스트는 공식적으로 다양한 종류의 매처를 제공한다.

 

단언문은 테스트 대상이 기댓값과 일치하는지 매처를 사용해 검증한다. 테스트 검증에 사용하는 매처들을 다음과 같은 카테고리의 예제 코드를 통해 살펴본다.

• 진릿값 검증
• 수치 검증
• 문자열 검증
• 배열 검증
• 객체 검증

또한 비동기 처리에 대한 테스트 방법도 다룬다. 모던 웹 개발에서는 외부 API에서 데이터를 가져오거나 파일을 읽는 등 다양한 작업에서 비동기 처리가 필요하다. 이러한 비동기 처리가 포함된 함수를 테스트하는 방법을 학습한다.

 

구체적으로는 아래와 같은 비동기 테스트 기법을 다룬다.

• Promise를 반환하는 함수
• async/await을 활용한 함수
• Reject 검증 테스트 함수
• 테스트 결과가 기댓값과 일치하는지 확인하는 함수

 

목 객체

 

테스트의 재현성은 실제 실행 환경과의 유사성에 비례한다. 그러나 재현성을 극대화하려다 보면 실행 시간이 과도하게 길어지거나 환경 구축이 복잡해지는 문제가 발생할 수 있다.

 

이러한 문제의 대표적인 예시는 웹 API에서 데이터를 취득하는 경우다. 웹 API 사용 시 네트워크 오류 등으로 인한 실패 가능성이 항상 존재하며, 성공 케이스뿐만 아니라 실패 케이스도 테스트해야 한다.

 

이때 주목해야 할 점은 테스트의 대상이 웹 API 자체가 아니라 취득한 데이터에 대한 처리라는 것이다. 따라서 테스트 환경에 실제 웹 API 서버가 반드시 필요한 것은 아니다.

 

이러한 상황에서 활용할 수 있는 것이 바로 목 객체다. 목 객체는 실제 API 응답을 모방한 가짜 데이터를 제공함으로써, API 호출 결과에 대한 처리를 효과적으로 테스트할 수 있게 해준다.

 

목 객체의 주요 이점으로는 테스트가 어려운 부분에 대한 검증 가능, 테스트 실행 속도 향상, 외부 의존성 제거로 인한 안정적인 테스트 환경 구축, 다양한 시나리오(성공, 실패, 예외 상황 등) 쉽게 재현 가능 등이 있다.

 

결과적으로 목 객체를 활용하면 더욱 효율적이고 신뢰성 있는 테스트를 수행할 수 있다.

 

 

커버리지 리포트 읽기

테스트 프레임워크는 구현 코드가 얼마나 테스트되었는지 측정하여 리포트를 작성하는 기능을 제공한다. 이를 커버리지 리포트라고 하며, 제스트도 공식적으로 이 기능을 지원한다.

 

제스트의 커버리지 리포트는 다음과 같은 주요 항목을 포함한다.

• Stmts(구문 커버리지)
• Branch(분기 커버리지)
• Funcs(함수 커버리지)
• Lines(라인 커버리지)

각 항목은 테스트 코드가 실제 코드베이스의 다양한 부분을 얼마나 철저히 검증하고 있는지를 나타낸다.

 

구문 커버리지는 코드의 각 구문이 실행되었는지를, 분기 커버리지는 조건문의 각 분기가 테스트되었는지를 보여준다. 함수 커버리지는 정의된 함수들이 호출되었는지를, 라인 커버리지는 코드의 각 라인이 실행되었는지를 나타낸다.

 

이러한 지표들을 통해 개발자는 테스트의 완성도를 평가하고 개선할 영역을 파악할 수 있다. 각 항목에 대한 자세한 해석 방법과 활용 전략은 책에서 더 깊이 있게 다루고 있으므로 효과적인 테스트 전략을 수립할 수 있을 것이다.

 

 

웹 애플리케이션 통합 테스트

 

7장부터는 Next.js로 개발된 애플리케이션을 예제로 사용한다. 이 예제는 아래 GitHub 리포지토리에서 클론할 수 있다.

 

https://github.com/frontend-testing-book-kr/nextjs

GitHub - frontend-testing-book-kr/nextjs

 

이 코드베이스는 제스트를 활용한 단위 테스트와 통합 테스트뿐만 아니라 Storybook, 시각적 회귀 테스트, E2E 테스트까지 포함하고 있어 이전 장의 예제보다 실무에 더 가까운 테스트 환경을 경험할 수 있다.

 

Next.js로 구현된 애플리케이션이지만, 테스트 프레임워크의 사용법은 다른 프레임워크와 크게 다르지 않다.

 

Next.js 특유의 기능도 있지만, 인터랙션 테스트 작성법과 테크닉은 프레임워크에 관계없이 널리 적용할 수 있는 보편적인 내용이다.

 

따라서 Next.js나 React에 익숙하지 않은 독자라도 이 예제에 도전해볼 것을 권장한다.

 

 

UI 컴포넌트 탐색기

프론트엔드 개발에서 UI 컴포넌트는 핵심적인 구현 대상이다. 개발자뿐만 아니라 디자이너, 프로젝트 리더 등 다양한 팀 구성원과 UI 컴포넌트를 효과적으로 공유할 수 있다면 협업 효율이 크게 향상된다.

 

UI 컴포넌트 탐색기는 이러한 공유를 용이하게 만드는 협업 도구로, 최근에는 그 활용 범위가 테스트 영역으로까지 확장되고 있다.

 

전통적인 프론트엔드 테스트가 jsdom을 이용한 단위 테스트와 브라우저 기반 E2E 테스트로 양분되어 있었다면, UI 컴포넌트 탐색기를 활용한 테스트는 이 두 접근법의 중간 지점에 위치한다.

 

스토리북은 대표적인 UI 컴포넌트 탐색기로 최근 테스트 기능을 대폭 강화해 더욱 다양한 활용이 가능해졌다.

 

8장에서는 스토리북의 기본 개념과 사용법을 소개하고 테스트에 어떻게 효과적으로 활용할 수 있는지 다룬다. 독자들은 모던 프론트엔드 개발 환경에서 UI 컴포넌트를 더욱 효율적으로 개발하고 테스트하는 방법을 학습할 수 있을 것이다.

 

 

E2E 테스트

프론트엔드 개발에서 E2E$_{End-to-End}$ 테스트는 실제 브라우저를 사용하여 애플리케이션의 전체적인 동작을 검증할 수 있는 강력한 도구다. 브라우저 고유 API를 활용하거나 페이지 간 이동을 포함하는 복잡한 시나리오를 테스트하는 상황에 안성맞춤이다.

 

E2E 테스트 프레임워크를 사용할 때, 일반적으로 다음 두 가지 상황을 모두 E2E 테스트로 간주한다.

• 브라우저 고유 기능과 연동된 UI 테스트
• 데이터베이스 및 하위 시스템과 연동된 E2E 테스트

 

E2E 테스트를 효과적으로 수행하기 위해서는 테스트의 목적을 명확히 설정하는 것이 가장 중요하다.

 

실제 애플리케이션은 데이터베이스 서버나 외부 저장소 서비스 등 다양한 시스템과 연결되어 있다.

 

따라서 E2E 테스트에서는 이러한 전체 시스템 구조를 얼마나 실제와 유사하게 재현할 것인지가 중요한 고려사항이 된다.

 

10장에서는 다양한 상황에 따라 어떤 관점에서 접근하고 어떤 선택을 내려야 할지 상세히 살펴볼 것이다.

 

읽고 난 후에는 프로젝트 상황에 맞는 최적의 E2E 테스트 전략을 수립할 수 있을 것이다.

 

 

한국어판 부록

부록에서는 GitHub Actions를 활용한 테스트 자동화 방법을 다루고 있다. 예제 코드는 아래 GitHub 저장소에서 클론할 수 있다.

 

https://github.com/frontend-testing-book-kr/github-actions-example

GitHub - frontend-testing-book-kr/github-actions-example

 

CI(지속적 통합) 환경에서의 테스트 자동화 내용을 부록에 담겨있다. 이 주제가 본문의 핵심 내용을 보완하는 역할을 하기 때문이다.

 

GitHub Actions는 사용법이 비교적 간단하기 때문에 CI 설정 경험이 없는 독자들도 쉽게 따라할 수 있을 것이라고 원저자는 강조한다.

 

 

총평

‘프런트엔드 개발을 위한 테스트 입문’책은 프론트엔드 개발에서의 테스트 전략을 포괄적이고 체계적으로 다루고 있다. 단위 테스트부터 UI 컴포넌트 테스트, 통합 테스트, 시각적 회귀 테스트, E2E 테스트에 이르기까지 다양한 테스트 방법론을 이해하기 쉽게 설명한다.

 

책의 구성은 실무적으로도 사용할 수 있게 크게 두 파트로 나누어 실제 프로젝트에서 활용할 수 있는 예제 코드와 GitHub 저장소 링크를 제공한다. 마지막에 부록에 있는 Github Actions까지 세 개의 링크를 제공한다. 실제 코드로 적용해보고 눈으로 확인할 수 있는 부분이 좋았다.

 

개인적으로 인상적이었던 부분은 아래와 같다.

1. UI 컴포넌트 테스트
2. 스토리북을 활용한 시각적 회귀 테스트
3. E2E 테스트의 다양한 상황과 접근 방법
4. GitHub Actions를 이용한 CI/CD 파이프라인 구축 가이드

 

저자는 테스트의 필요성과 효율성을 강조하면서도, 각 프로젝트의 상황에 맞는 최적의 테스트 전략을 수립할 것을 권장한다. 무조건적으로 테스트를 적용하기보다는 비용 대비 효과를 고려한 균형 잡힌 접근을 추구한다는 점이 실용적으로 느껴졌다.

 

필자와 같은 초보자부터 경험 많은 개발자까지 모두에게 유용한 책으로 보인다. 평소에도 테스트 기술에 관심이 있었다면 이 책으로 공부해보는 것이 많은 도움이 될 것이다.