Vue 테스팅 핸드북

# 이 가이드는 무엇인가요?

Vue.js 테스팅 핸드북에 방문한 것을 환영합니다!

이 가이드는 Vue 컴포넌트를 테스트 하는 방법에 집중한 예제를 짧게 모아 놓았습니다. 이 문서에서는 Vue 컴포넌트를 테스트 하기 위한 공식 라이브러리인 vue-test-utils와 근래에 자주 쓰이는 테스팅 프레임워크인 Jest를 사용합니다. 컴포넌트를 테스트 하는 모범 사례들 뿐만 아니라, vue-test-utils의 API도 다룹니다.

각각의 섹션은 독립적으로 구성되어 있습니다. 먼저 vue-cli로 환경을 설정하고 간단한 테스트를 작성하려고 합니다. 다음으로 컴포넌트를 렌더하는 방법인 mount와 shallowMount에 대해서 얘기해보려고 합니다. 두 방법이 어떻게 다른지 증명하고 설명하겠습니다.

이후에는 컴포넌트를 테스트 할 때 발생하는 다양한 시나리오를 테스트 하는 방법을 다룹니다. 테스트 할 컴포넌트는 아래와 같습니다.

  • props 받기
  • 컴퓨티드 프로퍼티
  • 다른 컴포넌트 렌더
  • 이벤트 방출

더 나아가서 아래와 같은 좀 더 흥미로운 경우도 살펴보겠습니다.

  • Vuex 테스트 모범 사례 (컴포넌트에서, 그리고 독립적으로)
  • Vue 라우터 테스트
  • 3rd 파티 컴포넌트를 포함한 테스트

아래의 예시와 같이, Jest의 API를 사용해서 작성한 테스트를 좀더 견고하게 만드는 방법도 알아봅니다.

  • API 응답 모킹하기
  • 모듈 모킹과 스파잉
  • 스냅샷 사용

# 더 읽을거리

아래의 유용한 자료들도 포함하고 있습니다.

TDD를 위한 설정하기 →