[Nuxt] Vue 에서 유닛 테스트를 해 보자

유닛테스트 (단위테스트)가 몬가요

• 이름 그대로 작은 단위로 나눠 테스트 하는 것이다
• 테스트에 네트워크나 DB 접근이 들어가면 안 된다
  • 보통 axios 관련 테스트를 할 땐 데이터 mocking 을 한다

e2e 와 다른 장점이 몬가요

• 빈번히 일어나는 수정의 버그를 막는데 효과적이다
• 들어가는 비용이 저렴하다 (네트워크 통신을 안 하기 때문)

그럼 유닛테스트가 e2e보다 무조건 좋을까?

그건 당연히 아님

어떤 목적으로 테스트 하느냐에 따라 방법이 달라지는 것이다

e2e 는 사용자의 입장에서 테스트를 하는 것으로,
실제 브라우저를 띄워 네트워크 통신까지 한다

따라서 실제 상황에서 발생할 수 있는 에러를 잡을 수 있다

크로스 브라우징, 렌더링, 네트워크, 내비게이션 관련 테스트가 필요할 경우에는
e2e 테스트를 하는 것이 더 효과적이다.

원칙

• 유닛 테스트는 테스트를 가장 단위로 나누는 것이 핵심이다.
• 유닛 테스트는 반드시 독립적이어야 한다. (테스트 슈트 내에서도 독립적이어야 함)
  • 실행 결과는 삭제하는 편이 좋다.
    • Vue Test Utils 에서는 destroy 함수를 제공한다
• 무거운 테스트 코드는 따로 빼낸다

테스트 프레임워크는 어떤 것이 있나요

프론트에서 가장 많이 쓰는 라이브러리는 보통 Jest, Mocha 등등이 있다.

그럼 해당 프레임워크만 설치하면 바로 테스트가 가능한가요

물론 가능은 하지만, Vue Comonent 를 테스트 하기에는 불편한 감이 아주 많다.

따라서 Vue 유닛테스트를 할때
Vue Test Utils 를 붙여서 사용하고는 한다.

https://v1.test-utils.vuejs.org/installation/#using-other-test-runners

Installation | Vue Test Utils

그리고 해당 도큐먼트에서 대놓고 Jest 를 권장하기 때문에,
보통 Jest + Vue Test Utils 조합을 사용하곤 한다.

근데…! 새로운 프레임워크가 등장하였다

Vite 서버에서 테스트 실행을 빨리 할 수 있다는 Vitest 라는 프레임워크가 등장하였다.

https://vitest.dev/guide/why.html

Vitest

공식 문서만 보면 아주 좋아 보이고 당장 Vitest 로 바꿔야 할 것 같지만,
실제 사례들을 찾아 보니 오히려 Jest 보다 3배 가량 늦다는 글을 찾았다.

https://github.com/vitest-dev/vitest/issues/579

Vitest runs tests 3x slower than Jest with threads: true (default) setting · Issue #579 · vitest-dev/vitest

아직은 Vitest 를 도입하기엔 시기상조인 것 같다.

---

어떻게 하면 되나요

(내생각)

프레임워크는 Vue Test Utils + Jest 구조로 한다.

1. 화면
   1. 페이지 단위가 아닌 컴포넌트 단위로 분리한다
2. 내비게이션
   1. 화면 이동이 아닌 Vue Router 를 mocking 한다
3. 상태
   1. 컴포넌트 내에서 테스트 하는 것이 아닌, Store 를 따로 분리한다.
   2. 상태를 mocking 한다.

나머지 규칙들은 차차…