[Vue.js] 단위 테스트 - movie 스토어

테스트 설정

우리가 test를 할 때 컴포넌트를 import하면, 넘어오는 결과는 '객체 데이터' 이다.

따라서 다음과 같이 대입 연산자로 할당하게 되면, beforeEach에 선언해도 값이 바뀔 수 있다.

(얕은 복제를 하게되면 메모리 주소값만 복사하게 되므로 같은 객체를 가리키게 된다.)

따라서 cloneDeep을 이용하여 깊은 복사를 해야한다.

그렇게 하면 메모리 주소가 가리키고 있는 실제 객체 데이터를 복사하게 되므로 원본에는 영향을 끼치지 않는다.

state()는 함수로 정의하므로 따로 실행시킨다.

store의 js 구조 중 state는 함수를 통해 객체 데이터를 반환하는 형태로 작성하므로 깊은 복사로는 복사되지 않는다.

따라서 state()를 따로 실행시켜 그 결과를 새로 .state에 할당해야 한다.

state는 함수로 선언돼있다.

mutations를 뜻하는 commit과 actions를 뜻하는 dispatch는 store의 js파일에는 명시돼있지 않으므로 따로 정의한다.

이렇게 정의하면 store.mutations.updateStore(store.state, {}) 와 같이 불편한 호출방식을 다음처럼 줄일 수 있다.

store.dispatch('updateState')

여기서 주의할 점은, dispatch는 일반 함수인데, actions는 비동기 함수이다.

따라서 return 키워드를 사용하여 dispatch가 비동기로 동작할 수 있도록 만들어주어야 한다.

 

테스트

1. 영화 데이터 초기화

테스트 로직

결과

2. 영화목록 가져오기

영화 정보를 가져올 때는 _fetchMovie() 메소드를 사용한다.

이 때, axios.post를 이용하여 네트워크 요청을 하므로 이를 모의함수로 바꾸어줄 예정이다.

테스트 로직

결과

코드 정리

코드가 조금 난잡하므로 정리해준다.

mockResolvedValue() 사용하기

jest.fn()을 살펴보면, resolve(res)를 하기 위해 Promise 생성자와 비동기 구문을 사용하고 있다.

중요한 점은 resolve(res)를 비동기로 반환만 해주면 되는데, 그 때 사용하는 메소드다.

참조) Mock Functions · Jest (jestjs.io)

Mock Functions · Jest

결과

3. 영화 목록 수신 실패시 에러 메세지 도출

테스트 로직

결과

4. 영화 아이템 중복 시 고유화 처리

테스트 로직

결과

5. 단일 영화 상세정보 확인하기

테스트 로직

결과