참고
https://youtu.be/q9d631Nl0_4?si=ygDZPvIiM4jtBDwo
https://youtu.be/MN7Pw4mK6lU?si=uj4TEHC7lGZJGx5S
프론트 엔드는 입출력이 데이터가 아니기 때문에 테스트가 애매함
입력 데이터
- dom 이벤트 ( 마우스, 키보드, 터치 등 이벤트 )
- 라우팅/io ( URL 변경, 로컬스토리지 등)
출력데이터
- 코드 관전 (HTML, CSS)
- 사용자 관점 (브라우저가 렌더링한 화면)
시각적 요소 검증으로는 스냅쇼 테스트가 있음
=> 이거 테스트 애매함...
html 구조이기 때문에 테스트 코드를 잘 때도 픽셀 정보를 예측할 수 없고
테스트가 통과한다고 해도 의도된 결과가 나온다고 보장할 수 없음
그래서 이걸 편하게 해주는게 stortyBook이라는 건데
만들어놓은 공통 컴포넌트를 시각적으로 볼 수 있고, 그 안에서 ui 테스트도 가능함
근데 나는 이번에 UI단의 테스트는 패스할 거임..
storyBook 도입을 안 했기 때문임
이유는 기한 맞춰서 구현해야하는데, 시간이 너무 부족했음
도입하려고 하는 건
jest, react-test-library 통한 단위, 통합 테스트 정도임
단위(unit) 테스트
하나의 함수, 메소드, 클래스, 모듈 등이 의도한 대로 작동하는지 테스트하는 거임
가장 작은 테스트
- jest, react-testing-libaray 가 있음
통합(integration) 테스트
여러개 모듈, 컴포넌트 등이 잘 동작하는지 테스트 함
비즈니스 로직과 연관됨
예를 들면 api통신 - 화면 잘 보여주는지 같은 거
- react-testing-libaray 가 있음
E2E 테스트
사용자의 입장에서 경험할 것을 예상되는 행동을 테스트하는 거임
다루는 범위가 가장 큼
- cypress, puppeteer 가 있음
-------------------
컴포넌트 구조이기 때문에 작은 단위들을 테스트하는게 효율적이지 않은가 라고 생각했는데
결국 사용자가 보는 건 컴포넌트들이 합쳐진 화면과 모듈간의 동작을 보는 것이기 때문에 통합 테스트가 먼저 이뤄지는게 맞는 거 같다
영상에서도 인터페이스 위주, 통합 테스트 위주로 구현하라고 조언함
cypress를 이용한 e2e테스트도 좋을 것 같지만 이건 정말 많은 시간이 필요해서 통합 테스트 먼저 권유한다고...
'TIL' 카테고리의 다른 글
tanstack Query v5 (0) | 2024.07.28 |
---|---|
타입스크립트 never, 컨디셔널 타입 (0) | 2024.07.27 |
타입스크립트의 추론 (1) | 2024.07.20 |
새로 나온 hook useFormStatus 등 리액트 동향 살펴보기 (0) | 2024.07.02 |
icon suspense lazy 기능으로 넣기 (0) | 2024.07.02 |
댓글