shallowMount 로 Header.vue 테스트, mockResolvedValue

mount vs shallowMount

ShallowMount는 얉은 연결로써 mount와달리 현 컴포넌트 외에 다른 연결된 하위 컴포넌트는 연결하지않는다.

 

Header.vue 테스트

정상 Header.vue에서 <RouterLink>나 mapstate같은 것을 쓰기위해 main.js에서 router와 store을 선언해야하는데 Header.test.js에서 import로 가져와 global의 plugins로 선언하여 사용할 수있다.

 

*beforeEach메소드를 통해 테스트1이 종료된 후 오염된 기본값을 다시 초기화 해주도록 설정 할 수 있다.

 

 

페이지 이동간 테스트를 위해 router의 페이지의 이동시키기 위해 push와 await를 통해 페이지가 준비되면 기다리도록 하는 로직을 작성한다.

 

 

비동기로 미리 res를 만들어 promise가 처리될시 resolve가 반환되는데 내부 값을 res로 주어 미리 선언한 res가 나오게 된다.

비동기로 미리 res를 만들어 promise가 처리될시 resolve가 반환되는데 내부 값을 res로 주어 미리 선언한 res가 나오게 된다.

 

 

jest.fn() 뒤에 promise~resolve를 쓰지않고 mockResolvedValue메소드로 미리 선언한 res를 넣게되면 axios의 결과값이 res로 반환된다.

promise~resolve를 쓰지 않고 mock처럼 가짜함수를 만들어 처리하면 로직이 쉬워진다.