claude-instructions/.claude/rules/frontend/testing.md

paths

paths
**/*.spec.ts **/*.test.ts **/*.spec.vue **/*.test.vue

테스팅 컨벤션

Vitest + @nuxt/test-utils 환경 기준 최종 업데이트: 2026-04-07

---

테스트 파일 위치

테스트 파일은 대상 파일과 같은 디렉토리에 위치시킨다.

테스트 대상	위치
컴포넌트	app/components/UserProfile.spec.ts
컴포저블	app/composables/useAuth.spec.ts
유틸 함수	app/utils/formatDate.spec.ts
서버 API	server/api/products/index.spec.ts

---

환경 설정

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

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

---

컴포넌트 테스트

// app/components/UserProfile.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime'
import UserProfile from './UserProfile.vue'

describe('UserProfile', () => {
  it('사용자 이름을 렌더링한다', async () => {
    const wrapper = await mountSuspended(UserProfile, {
      props: { user: { id: '1', firstName: '길동', lastName: '홍' } },
    })
    expect(wrapper.text()).toContain('홍길동')
  })

  it('관리자 배지를 조건부로 표시한다', async () => {
    const wrapper = await mountSuspended(UserProfile, {
      props: { user: { id: '1', firstName: '길동', lastName: '홍', role: 'admin' } },
    })
    expect(wrapper.find('[data-testid="admin-badge"]').exists()).toBe(true)
  })
})

---

컴포저블 테스트

// app/composables/useCounter.spec.ts
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('초기값으로 시작한다', () => {
    const { count } = useCounter(5)
    expect(count.value).toBe(5)
  })

  it('increment가 count를 증가시킨다', () => {
    const { count, increment } = useCounter(0)
    increment()
    expect(count.value).toBe(1)
  })

  it('reset이 초기값으로 되돌린다', () => {
    const { count, increment, reset } = useCounter(0)
    increment(3)
    reset()
    expect(count.value).toBe(0)
  })
})

---

서버 API 테스트

// server/api/products/index.spec.ts
import { setup, $fetch } from '@nuxt/test-utils'

describe('GET /api/products', async () => {
  await setup()

  it('상품 목록을 반환한다', async () => {
    const response = await $fetch('/api/products')
    expect(response).toHaveProperty('products')
    expect(Array.isArray(response.products)).toBe(true)
  })

  it('page 파라미터를 처리한다', async () => {
    const response = await $fetch('/api/products?page=2')
    expect(response.page).toBe(2)
  })
})