요약

• 프론트(이하 Vue)를 단위 테스트 하려면 크게 3가지 관점으로 접근하자
  - Component
  • Vuex
  • 두개의 연동
• 컴포넌트 테스트는 vm.data / 각 html 엘리먼트들의 위치와 연동 등 vue가 연동이 잘되는지 확인하는데 집중
• Vuex의 경우 비즈니스 로직 등 해당 컴포넌트에서 진행될 로직 그 자체에 집중

프론트의 테스트는 도대체 어떻게...?

백엔드의 경우 테스트를 하는 것은 비교적 간단했다. 기본적으로 서버의 로직을 따라 가서

api 호출 - 로직 실행 - (DB 로직 수행) - 결과값 리턴

함수 만들고 함수 결과값 확인하고, api 연결해서 api 호출 확인하고, db 호출 해서 확인하는 등 레이어 구분이 가능하였기에 그나마 쉽게 접근이 가능하였다.

하지만 프론트의 경우

(출처:https://medium.com/@abdulsamet.ileri/unit-testing-a-vue-component-with-vuex-using-vue-test-utils-and-jest-5433053535ec)
위 처럼 화면이 있을때 당장 고려해봐야하는 것은

• 내가 원하는 대로 모양이 나오는가 등(화면 UI적 이슈)
• 각 Input 필드에 데이터를 입력 하면 데이터가 담기는가
• Login 버튼을 누르면 서버에 api를 보내는 가
• 그 외 내부의 로직(함수) 작동 여부

백엔드처럼 명확하게 어떠한 흐름이 나오는 것이 아니기에(물론 지금은 조금씩 보인다) 막막할 따름이다.

UI 적인 테스트는 E2E에 맡기자

• Cypress 등 E2E 테스트를 통해서 UI적인 부분은 해결할 수 있다(나중에 할 예정)

프론트 흐름을 정의하면

• 화면에서 무언가를 입력(행동) 하고 이를 페이지내에서 저장 및 행동을 한 후 어떠한 액션(api 호출 등)을 하게 된다.
• 그래서 나는 이를 구분 다음과 같이 구분 하였다.
  - 컴포넌트 : 화면에서 무언가를 입력(행동) 하고 이를 페이지내에서 저장 및 행동
  • 외부 액션(Vuex 등) : 어떠한 액션(api 호출 등)
  • 그리고 이 두가지의 연동
• 내가 한게 베스트 선택은 아니지만 적어도 어떻게 행동해야할지는 감을 잡을 수 있었다.

간단한 컴포넌트를 만들자

• 별 기능 없다. Vuex에 있는 값을 불러 오고 Click을 하면 값이 증가되는, 매우 간단한 페이지이다.
• 그리고 위 페이지를 TDD 방식으로 작성하고자 한다.
• vue cli를 통해서 만들었고 테스팅 모듈은 jest를 사용한다.

// 아래로 진행
$vue create side_vue_todo

• 관련 코드는 깃헙 에서 확인 가능하다. 다만 이것저것 올리고 있는 레포라서 깔끔하지는 않다.