옮긴이 머리말

• 테스트 코드를 경험해본 적이 없거나 UI 개발을 할 때는 테스트 코드 작성이 어렵다는 막연한 편견으로 충분한 지식을 쌓기도 전에, <여우와 포도>의 우화처럼 “테스트 코드는 어차피 실제로는 못 쓰는 거야. 괜히 시간 낭비하지 말고 안 배우길 잘했어”라며 포기하는 사람이 많다.
• 테스트 코드는 비용 절약을 위해 자주 변하지 않는 부분에 한정하여 회귀 테스트를 면제하는 용도로 사용할 수도 있고, 새로 들어온 팀원에게 보여줄 사양서로 활용할 수도 있으며, 리팩터링 시 초보적인 실수를 줄이는 용도로도 사용할 수 있다.
• 선택 가능한 옵션을 늘린다는 생각으로 접근해볼 것을 권한다.

1. 이 책의 구성

1.1 다양한 테스트 방법

js/ts로 테스트 코드를 작성하는 방법뿐만 아니라 언제, 어떤 테스트를 실시해야 하는지 알아본다.

• 함수 단위 테스트
• UI 컴포넌트와 단위테스트
• UI 컴포넌트와 통합 테스트
• UI 컴포넌트와 시각적 회귀 테스트
• E2E 테스트

1.2 라이브러리와 도구

• 타입스크립트
• 프런트엔드 라이브러리 및 프레임워크
  • 리액트: UI 컴포넌트 라이브러리
  • Zod: 유효성 검사(Validation) 라이브러리
  • React Hook Form: 리액트에서 폼을 쉽게 다루게 해주는 라이브러리
  • Next.js: 리액트 기반 웹앱 프레임워크
  • Prisma: DB에 접속하는 객체 관계 매핑 라이브러리
• 테스트 프레임워크 및 도구
  • Jest: 명령줄 인터페이스 기반 테스트 프레임워크 및 테스트 러너
  • Playwright: 헤드리스 브라우저를 포함한 테스트 프레임워크 및 러너
  • reg-suit: 시각적 회귀 테스트 프레임워크
  • 스토리북: UI 컴포넌트 탐색기

2. 테스트를 작성해야 하는 이유