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

요시이다케후미

저자:요시이다케후미
프런트엔드엔지니어.프런트엔드개발현장의실무노하우를웹사이트(https://zenn.dev/takepepe)에올리고있으며,잡지《WEB+DBPRESS》에글을기고하기도한다.저서로《TypeScript(실전타입스크립트)》,《Next.js(실전Next.js)》가있다.

역자:원밀리언라인즈코딩(배언수)
국내외최고의부트캠프와온라인교육플랫폼에서신입개발자들을양성해왔다.네이버부스트캠프,현대자동차그룹소프티어부트캠프,우아한테크캠프,원티드프리온보딩등에서교육및멘토링활동을활발하게하면서자료구조및알고리즘,모바일앱개발,데이터사이언스,프롬프트엔지니어링등의분야에서깊이있는지식을공유해왔다.인프런과유데미에서온라인강의를하고있으며,다양한기업의내부교육을진행하면서현업개발자들의역량강화에도기여하고있다.

옮긴이머리말xiii
베타리더후기xv
시작하며xvi
이책에대하여xvii

CHAPTER1테스트목적과장애물1
1.1이책의구성1
1.2테스트를작성해야하는이유4
1.3테스트작성의장벽9

CHAPTER2테스트방법과테스트전략13
2.1테스트범위와목적13
2.2프런트엔드테스트의범위15
2.3프런트엔드테스트의목적18
2.4테스트전략모델21
2.5테스트전략계획23

CHAPTER3처음시작하는단위테스트27
3.1환경설정27
3.2테스트구성요소28
3.3테스트실행방법31
3.4조건분기35
3.5에지케이스와예외처리37
3.6용도별매처43
3.7비동기처리테스트48

CHAPTER4목객체53
4.1목객체를사용하는이유53
4.2목모듈을활용한스텁55
4.3웹API목객체기초59
4.4웹API목객체생성함수64
4.5목함수를사용하는스파이68
4.6웹API목객체의세부사항72
4.7현재시각에의존하는테스트75

CHAPTER5UI컴포넌트테스트79
5.1UI컴포넌트테스트기초지식79
5.2라이브러리설치82
5.3처음시작하는UI컴포넌트테스트84
5.4아이템목록UI컴포넌트테스트89
5.5인터랙티브UI컴포넌트테스트94
5.6유틸리티함수를활용한테스트101
5.7비동기처리가포함된UI컴포넌트테스트108
5.8UI컴포넌트스냅숏테스트114
5.9암묵적역할과접근가능한이름118

CHAPTER6커버리지리포트읽기125
6.1커버리지리포트개요125
6.2커버리지리포트읽기127
6.3커스텀리포터132

CHAPTER7웹애플리케이션통합테스트135
7.1Next.js애플리케이션개발과통합테스트135
7.2ReactContext와통합테스트137
7.3Next.js라우터와렌더링통합테스트141
7.4Next.js라우터와입력통합테스트145
7.5ReactHookForm으로폼쉽게다루기149
7.6폼유효성검사테스트151
7.7웹API응답을목객체화하는MSW159
7.8웹API통합테스트161
7.9이미지업로드통합테스트167

CHAPTER8UI컴포넌트탐색기175
8.1스토리북기초175
8.2스토리북필수애드온180
8.3ContextAPI에의존하는스토리등록185
8.4웹API에의존하는스토리등록188
8.5Next.jsRouter에의존하는스토리등록192
8.6playfunction을활용한인터랙션테스트193
8.7addon-a11y를활용한접근성테스트198
8.8스토리북테스트러너202
8.9스토리를통합테스트에재사용하기207

CHAPTER9시각적회귀테스트211
9.1시각적회귀테스트의필요성211
9.2reg-cli로이미지비교하기214
9.3스토리캡도입218
9.4reg-suit도입하기222
9.5외부스토리지서비스설정228
9.6깃허브액션에reg-suit연동하기232
9.7시각적회귀테스트를활용한적극적리팩터링236

CHAPTER10E2E테스트239
10.1E2E테스트란239
10.2플레이라이트설치및기초242
10.3테스트할애플리케이션246
10.4개발환경에서E2E테스트실행하기250
10.5프리즈마를활용한테스트254
10.6로그인기능E2E테스트259
10.7프로필기능E2E테스트263
10.8Like기능E2E테스트266
10.9신규작성페이지E2E테스트269
10.10기사편집페이지E2E테스트272
10.11게재된기사목록페이지E2E테스트275
10.12불안정한테스트대처방법278

APPENDIXA한국어판부록:깃허브액션에서UI컴포넌트테스트실행하기281
A.1깃허브액션핸즈온281
A.2워크플로파일작성법288
A.3작업을병렬처리해서워크플로최적화하기291

APPENDIXB한국어판부록:깃허브액션에서E2E테스트실행하기299
B.1깃허브액션에서E2E테스트실행하기299
B.2도커파일작성법301
B.3도커컴포즈파일작성법304

찾아보기310

수많은테스트방법중에나에게맞는테스트방법을찾아업무효율을높이자

최근몇년간강력한라이브러리와프레임워크의등장으로프런트엔드개발에서는많은변화가있었다.싱글페이지애플리케이션을필두로한모던프런트엔드기술들은이미많은제품에적용되어사실상표준으로자리잡았다.개발환경의변화와는대조적으로테스트코드작성을어려워하는개발자가많다.게다가프런트엔드테스트는UI컴포넌트테스트,시각적회귀테스트,스토리북,E2E테스트등테스트방법이너무많아서언제,어떤테스트가필요한지판단하는것이쉽지않다.

어떤상황에서나정답인은빛총알은없다.각자의상황에맞는도구를선택해서테스트해야한다.프런트엔드에는테스트방법이많은만큼최적의방법을고를수있다.이책은가장주목받는프레임워크인Next.js와타입스크립트를통해최신개발환경을살펴보고어떤상황에서어떤테스트를해야하는지살펴본다.1~4장에서는테스트코드를처음작성하는개발자가대상이다.1장에서는테스트를작성해야하는이유를,2장에서는테스트범위와목적을다뤄프런트엔드테스트의전체적인흐름을이해할수있도록돕는다.3장과4장은본격적으로실습에들어가기앞서단위테스트와목객체를활용한테스트를심도깊게다룬다.

5~10장에서는리액트와Next.js예제를활용한모던프런트엔드기술을사용한다.5장에서는UI컴포넌트를테스트할때중점을둬야하는부분을살펴보며,6장에서는구현코드가얼마나테스트됐는지측정하는커버리지리포트를작성해본다.7장에서는본격적으로Next.js로만든애플리케이션예제를통해실무에가까운테스트를한다.8장에서는협업시능률이높아질수있도록UI컴포넌트공유를돕는UI컴포넌트탐색기인스토리북에대해살펴본다.9장에서는UI컴포넌트에시각적회귀테스트를실시하면서시각적회귀테스트의중요성을,10장에서는실제애플리케이션에가까운테스트가가능한E2E테스트를알아본다.마지막으로한국독자를위해깃허브액션에서UI컴포넌트테스트및E2E테스트하는방법을부록으로수록했다.

테스트코드는비용을절약할수있는것은물론버그를사전에발견해코드품질을높일수있고,새로들어온팀원에게보여줄사양서로활용할수도있으며,리팩터링시초보적인실수를줄이는용도로사용할수도있다.테스트코드작성을하면서얻을수있는많은장점에도테스트코드를미루고있거나어렵게느껴진다면이책이프런트엔드테스트의좋은지침서가될것이다.이책을통해자신감있게테스트코드를작성할수있게되기를바란다.

주요내용

테스트의필요성과프런트엔드테스트의흐름
E2E테스트,단위테스트,UI컴포넌트테스트등적재적소의테스트방법
제스트,리액트,reg-suit등다양한라이브러리와도구
목객체를활용한실패재현테스트
UI컴포넌트를위한스토리북사용법
깃허브액션에서의UI컴포넌트테스트와E2E테스트