jest 2 테스트 종류

 

참고

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테스트도 좋을 것 같지만 이건 정말 많은 시간이 필요해서 통합 테스트 먼저 권유한다고...