[Nuxt] Nuxt+Vitest 초기 세팅

1. 테스트 관련 라이브러리

기본 테스트 라이브러리

• vitest: 빠르고 가벼운 JavaScript 테스트 프레임워크
• eslint-plugin-vitest: Vitest 관련 ESLint 규칙 제공
• happy-dom: 가벼운 가상 DOM 구현체 (GUI 없는 브라우저 환경 제공)
  • 테스트, 웹 스크래핑, SSR 환경에서 활용 가능
• @testing-library/user-event: 사용자의 실제 브라우저 이벤트를 시뮬레이션하는 라이브러리
• @testing-library/jest-dom: Jest 전용 매처 제공
• Vitest에서도 Jest 매처를 지원하므로, 이를 활용해 직관적인 테스트 코드 작성 가능

Nuxt/Vue 테스트 관련 라이브러리

• @testing-library/vue: Vue 컴포넌트 테스트를 쉽게 작성할 수 있도록 지원 (@vue/test-utils 기반)
  • 내부적으로 @testing-library/dom을 사용해 DOM 요소 탐색 및 테스트 가능 (별도 설치 필요 없음)
• @vue/test-utils: Vue 3 컴포넌트 테스트를 위한 유틸리티 제공
• @nuxt/test-utils: Nuxt 앱의 테스트 환경을 설정하고 실행할 수 있도록 지원

---

2. Nuxt 런타임 환경 설정

Nuxt 환경을 추가해야 아래의 요소들을 정상적으로 테스트할 수 있다.

• Nuxt 전용 API: useNuxtApp(),useFetch() 등
• Nuxt 플러그인,미들웨어,자동 주입된 함수: useRoute(),useCookie() 등
• Nuxt 파일 기반 구조
  • 파일 기반 라우팅: pages/ 디렉터리를 통한 자동 라우팅
  • 기타 디렉터리 자동 처리: layouts/, server/ 등

Nuxt 환경 활성화

1. 부분적 Nuxt환경 활성화하는 방법 2가지

1. .nuxt.가 포함된 파일명 ex) my-file.nuxt.test.ts
2. 테스트 파일에 // @vitest-environment nuxt 주석 추가

2. 모든 테스트 Nuxt 환경 기본 설정하는 방법

vitest.config.ts에서 environment: 'nuxt’ 설정

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: { environment: 'nuxt' }
})

3. 특정 테스트 파일에서 Nuxt 환경을 제외하는 방법

// @vitest-environment node 주석 추가해 Nuxt환경 비활성화

---

3. Nuxt Dev Tools에서 테스트 (선택 사항)

export default defineNuxtConfig({
  modules: ['@nuxt/test-utils/module']
})

nuxt.config 파일에 @nuxt/test-utils/module을 추가하면 Nuxt DevTools에서 단위 테스트를 실행할 수 있으며, 추가적으로 @vitest/ui 가 필요하다.

---