- <프런트엔드 개발을 위한 테스트 입문> 을 읽고 정리합니다.
- 책의 핵심 20%를 찾아내어 정리할 수 있도록 해봅니다.
- frontend-testing-book-kr Github
1장 테스트 목적과 장애물
4장 목 객체
- 목 객체를 사용하는 이유
- 목 모듈을 활용한 스텁
- 라이브러리 대체하기
- 웹 API 목 객체 기초
- 웹 API 목 객체 생성 함수
- 목 함수를 사용하는 스파이
- 웹 API 목 객체의 세부 사항
- 현재 시각에 의존하는 테스트
- 설정과 파기
5장 UI 컴포넌트 테스트
- MPA와 SPA의 차이점
- 웹 접근성 테스트
- 라이브러리 설치
- 처음 시작하는 UI 컴포넌트 테스트
- 아이템 목록 UI 컴포넌트 테스트
- 쿼리(요소 퀴득 API)의 우선순위
- 인터랙티브 UI 컴포넌트 테스트
- 유틸리티 함수를 활용한 테스트
- 비동기 처리가 포함된 UI 컴포넌트 테스트
- UI 컴포넌트 스냅숏 테스트
- 암묵적 역할과 접근 가능한 이름
- 암묵적 역할 목록
6장 커버리지 리포트 읽기
- React Context와 통합 테스트
- Next.js 라우터와 렌더링 통합 테스트
- 동일한 테스트를 매개변수만 변경해 반복하기
- Next.js 라우터와 입력 통합 테스트
- React Hook Form으로 폼 쉽게 다루기
- 폼 유효성 검사 테스트
- 일정 시간 동안 재시도하는
waitFor - 웹 API 응답을 목 객체화하는 MSW
- 웹 API 통합 테스트
- 이미지 업로드 통합 테스트
8장 UI 컴포넌트 탐색기
- 스토리북 기초
- 스토리북 필수 애드온
- Context API에 의존하는 스토리 등록
- 웹 API에 의존하는 스토리 등록
- Next.js Router에 의존하는 스토리 등록
- Play function을 활용한 인터랙션 테스트
- 스토리북 테스트 러너
- 스토리를 통합 테스트에 재사용하기
9장 시각적 회귀 테스트
10장 E2E 테스트
- E2E 테스트란
- E2E 테스트 프레임워크 플레이라이트(Playwright)
- 개발 환경에서 E2E 테스트 실행하기
- 프리즈마를 활용한 테스트
- 로그인 기능 E2E 테스트
- 프로필 기능 E2E 테스트
- Like 기능 E2E 테스트
- 신규 작성 페이지 E2E 테스트
- 기사 편집 페이지 E2E 테스트
- 게재된 기사 목록 페이지 E2E 테스트
- 불안정한 테스트 대처 방법
Markdown 파일에 Headline2 목차를 자동으로 추가하려면 아래 명령어를 실행하세요.
node add-toc.js <Markdown 파일 경로>