brunch

You can make anything
by writing

C.S.Lewis

by Master Seo Jul 18. 2024

(책) 프런트엔드 개발을 위한 테스트입문-2024-07

2024-07

프런트엔드 테스트 전문가가 되도록 해주는 책

모르던 테스트 노하우를 알려주는 책

자신감 있게 테스트에 대해 이야기할 수 있도록 해준다.

이 책 하나만 잘해도 취직가능해 보인다



JPUB  출판사에서 책을  제공받아 작성된 서평입니다.




<1> 다양한 테스트 방법을 알 수 있다.

<2> 라이브러리와 도구를 알 수 있다.

<3> 테스트를  작성해야 하는 이유를 알 수 있다.

<4> 테스트 작성의 장벽을 알 수 있다.

<5> 테스트 범위를 알 수 있다.

<7> 테스트 환경 설정

<8> 테스트 실행 방법을 알려준다.

<9> 목객체를 사용, UI 컴포넌트 테스트, 커버리지 리포트에 대해 알려준다.




대상 독자

프런트엔드 개발 경험이 없는 개발자

테스트 코드 작성 경험이 없는 개발자

데이터베이스를 포함한 E2E 테스트 작성 경험이 없는 개발자



개발환경

macos 13.1 벤투라

node.js v18/13.0



두 가지 예제

중반부까지는 단위 테스트만 실시

후반부 예제는 Next.js 프레임워크를 사용한 애플리케이션이다.




<1> 다양한 테스트 방법을 알 수 있다.


1

함수 단위 테스트


2

UI컴포넌트와 단위 테스트


3

UI컴포넌트와 통합 테스트


4

UI컴포넌트와 시각적 회귀 테스트


5

E2E테스트



<2> 라이브러리와 도구를 알 수 있다.


1

타입 스크립트 - 예제코드는 타입 스크립트


2

프렌트엔드 라이브러리 및 프레임워크


3

테스트 프레임워크 및 도구

제스트 (JEST) 명령줄 인터페이스 기반 테스트 프레임워크




<3> 테스트를  작성해야 하는 이유를 알 수 있다.


1

사업의 신뢰성



2

높은 유지보수성



3

코드 품질 향상


4

원활한 협업




<4> 테스트 작성의 장벽을 알 수 있다.


테스트 코드를 작성하는 문화를 정착시키는 방법



1

어려운 테스트 방법

테스트 코드가 많을수록 효과적인 학습을 할 수 있다.

이 책의 샘플 코드를 참고하라.




2

테스트 작성 시간의 부족


습관적으로 작성해 준 테스트 코드가 기능에 문제점이 생길 때마다 알려줌.

빠른 속도로 프로젝트 재구축함.



3

테스트를 하면 시간이 절약되는 이유?


단기적 관점에서 보면 테스트 코드 작성은 많은 시간을 소모

장기적 과점에서는 오히려 시간이 절약된다.





4

팀원들을 설득하는 방법


다음부터 테스트를 작성하자 접근법은 성공하기 어렵다.

코드가 적을 때는 어떻게 테스트르  작성할지 방침을 세우기 쉽다.

팀 전원이 테스트를 작성하도록 설득하려면 참고할 수 있는 테스트 코드가 있어야 한다.

이 책을 참고해 교재로 사용해 보자.




<5> 테스트 범위를 알 수 있다.


1

정적 분석


2

단위 테스트



3

통합 테스트



4

E2E테스트




<6> 테스트 목적을 알 수 있다.


1

기능 테스트 (인터랙션 테스트)


2

비기능 테스트(접근성 테스트)


3

회귀 테스트

특정 시점을 기준으로 전후 차이를  비교하여 문제가 있는지 검증하는 테스트이다.




<7> 테스트 환경 설정


1

자바스크립트(타입스크립트)에서 가장 인기 있는 테스트 프레임워크이자 테스트 러너인 제스트를 사용한다.

목객체와 코드 커버리지 수집 기능까지 갖춘 메타의 오픈 소스이다.



2

Node.js 18.13.0 설치.


3

예제 코드 다운로드



4

가장 단순한 테스트




<8> 테스트 실행 방법을 알려준다.



1

명령줄 인터페이스로 실행



2

제스트 러너로 실행



3

실행 결과 확인




<9> 목객체를 사용, UI 컴포넌트 테스트, 커버리지 리포트에 대해 알려준다.



테스트 프레임워크에는 구현 코드가 얼마나 테스트됐는지 측정해 리포트를 작성하는 기능이 있다.

이 리포트를 커버리지 리포트라고 한다.

제스트도 공식적으로 커버리지 리포트를 지원한다.


이외에도

웹 애플리케이션 통합 테스트, E2E 테스트 등을 알려준다.



프런트엔드 테스트 전문가가 되도록 해주는 책





같이 보면 좋을 책

https://brunch.co.kr/@topasvga/1463


감사합니다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari