[Vue.js] 단위 테스트 - Header 컴포넌트

App.vue를 살펴보면, 크게 세가지 컴포넌트로 구성되는 것을 볼 수 있다.

여기서 Header 컴포넌트를 테스트해보자.

모든 로직을 테스트 할 필요 없이 중요한 로직만 테스트하면 된다.

 

isMatch() 테스트

경로 표현식이 없는 경우

/tests/components/Header.test.js 생성

if (!path) return false

위의 구문을 통해 제대로 false가 출력되는 것을 볼 수 있다.

 

참고) wrapper 객체 global화

만약 여러 testcase에서 wrapeer 객체를 사용한다면, 이를 전역화 시켜줄 수 있다.

방법 1. test 바깥에 선언하기

이 방식은 한가지 문제가 있는게, 특정 testcase에서 wrapper 객체의 내용을 바꾼다면

이후 테스트에 그 내용이 유지된 채 넘어가게 된다는 것이다.

 

방법 2. jest global - beforeEach() 사용하기

이렇게 하면 매번 새로운 wrapper 객체가 제공된다.

주의할 점은, wrapper를 beforeEach 안에서 선언하면 지역 변수가 되므로 전역으로 미리 선언해주어야 한다.

 

정규표현식 일치 여부 테스트

위와같은 테스트를 진행하면 오류가 발생한다.

isMatch()의 로직을 살펴보면 다음과 같이 fullPath를 가져오는데, 현재 테스트 환경에서는 $route가 없기 때문이다.

console.log(this$route)를 통해 터미널에 출력된 내용은 다음과 같다.

.fullPath가 / 이다.

참조) Testing Vue Router | Vue Test Utils (vuejs.org)

Testing Vue Router | Vue Test Utils

페이지 전환은 비동기로 작동한다.

 

그런데 페이지 이동을 하게되면 /src/routes/index.js에서 scrollTo가 작동하게 만들었는데,

테스팅 환경에서는 scrollTo가 정의돼있지 않다.

scrollTo를 정의해주면 다음처럼 테스트가 정상적으로 동작한다.