프론트엔드
cypress를 이용하여 components test 작성하기
두줄요약
Cypress로 Next.js 컴포넌트 테스트 환경을 구성하고 Todo List 렌더링을 검증했습니다. 관심사 분리, fixtures, stub을 활용한 컴포넌트 리팩터링 과정을 소개합니다.
구조와 흐름
- Cypress Component Testing 환경 구성과
npx cypress open-ct실행 - Next.js 플러그인 설정, 컴포넌트 테스트 폴더·파일 패턴 지정
- 페이지 마운트 후 텍스트·DOM 요소 검증 방식
적용해볼 점
- TodoList의 항목 수·제목·버튼 렌더링을 Cypress로 검증
- Todo 컴포넌트 분리와 TypeScript 타입 명확화
- fixtures의 정적 테스트 데이터와 stub을 활용한 재사용
주의할 점
- Next.js 11 환경에서 Cypress Component Testing을 위해 webpack 4 설정 필요
- UI, 부수 효과, 비즈니스 로직을 presenter·container·reducer로 관심사 분리
- 테스트 우선 순서를 고정하기보다 상황에 맞춘 테스트·구현·리팩터링 반복
