单元测试与组件测试

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'
 
export default defineVitestConfig({
  test: {
    environment: 'nuxt',  // 默认使用 nuxt 环境
    environmentOptions: {
      nuxt: {
        overrides: {
          // 测试时覆盖 nuxt.config
        },
      },
    },
  },
})

import { mountSuspended } from '@nuxt/test-utils/runtime'
import VideoCard from '~/components/VideoCard.vue'
 
it('renders video title', async () => {
  const wrapper = await mountSuspended(VideoCard, {
    props: {
      video: { id: '1', title: 'AI 生成的风景视频', duration: 120 },
    },
  })
 
  expect(wrapper.text()).toContain('AI 生成的风景视频')
})

import { renderSuspended } from '@nuxt/test-utils/runtime'
import VideoCard from '~/components/VideoCard.vue'
 
it('shows duration in human-readable format', async () => {
  const { getByText } = await renderSuspended(VideoCard, {
    props: {
      video: { id: '1', title: 'Test', duration: 3661 },
    },
  })
 
  getByText('1:01:01')  // 如果找不到会直接抛错
})

import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
// mock useRoute 返回固定路由
mockNuxtImport('useRoute', () => {
  return () => ({
    params: { id: '42' },
    query: { tab: 'comments' },
  })
})
 
// mock useFetch 返回模拟数据
mockNuxtImport('useFetch', () => {
  return (url: string) => ({
    data: ref({ title: 'Mock Video', views: 1000 }),
    pending: ref(false),
    error: ref(null),
  })
})

import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
const { useRouteMock } = vi.hoisted(() => ({
  useRouteMock: vi.fn(() => ({ params: { id: '1' } })),
}))
 
mockNuxtImport('useRoute', () => useRouteMock)
 
it('test with id 1', () => {
  // 使用默认 mock
})
 
it('test with id 2', () => {
  useRouteMock.mockReturnValue({ params: { id: '2' } })
  // ...
})

import { mockComponent } from '@nuxt/test-utils/runtime'
 
mockComponent('VideoPlayer', {
  template: '<div data-testid="mock-player">Mock Player</div>',
})

// composables/useFormatDuration.ts
export function useFormatDuration() {
  function format(seconds: number): string {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return h > 0
      ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
      : `${m}:${String(s).padStart(2, '0')}`
  }
  return { format }
}

// composables/__tests__/useFormatDuration.test.ts
import { useFormatDuration } from '../useFormatDuration'
 
describe('useFormatDuration', () => {
  const { format } = useFormatDuration()
 
  it('formats seconds only', () => {
    expect(format(45)).toBe('0:45')
  })
 
  it('formats minutes and seconds', () => {
    expect(format(125)).toBe('2:05')
  })
 
  it('formats hours', () => {
    expect(format(3661)).toBe('1:01:01')
  })
 
  it('handles zero', () => {
    expect(format(0)).toBe('0:00')
  })
})

// composables/useVideoDetail.ts
export function useVideoDetail(id: string) {
  const { data, pending, error } = useFetch(`/api/videos/${id}`)
  const isOwner = computed(() => {
    const { user } = useUserSession()
    return data.value?.authorId === user.value?.id
  })
  return { video: data, pending, error, isOwner }
}

// @vitest-environment nuxt
import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
mockNuxtImport('useFetch', () => {
  return () => ({
    data: ref({ id: '1', title: 'Test Video', authorId: 'user-42' }),
    pending: ref(false),
    error: ref(null),
  })
})
 
mockNuxtImport('useUserSession', () => {
  return () => ({
    user: ref({ id: 'user-42' }),
    loggedIn: ref(true),
  })
})
 
describe('useVideoDetail', () => {
  it('detects owner correctly', () => {
    const { isOwner } = useVideoDetail('1')
    expect(isOwner.value).toBe(true)
  })
})

it('updates search results when query changes', async () => {
  const query = ref('')
  const { results } = useSearch(query)
 
  expect(results.value).toEqual([])
 
  query.value = 'AI video'
  await nextTick()
 
  expect(results.value.length).toBeGreaterThan(0)
})

import { setup, $fetch } from '@nuxt/test-utils/e2e'
 
describe('Video API', async () => {
  await setup({ server: true })
 
  it('returns video list', async () => {
    const videos = await $fetch('/api/videos')
    expect(Array.isArray(videos)).toBe(true)
  })
 
  it('validates input on create', async () => {
    const res = await $fetch('/api/videos', {
      method: 'POST',
      body: { title: '' },  // 空标题
    }).catch(e => e)
 
    expect(res.statusCode).toBe(422)
  })
})

import { createEvent } from 'h3'
import handler from '~/server/api/videos/index.get'
 
it('returns videos', async () => {
  const event = createEvent({ method: 'GET' })
  const result = await handler(event)
  expect(result).toBeDefined()
})

// vitest.config.ts
export default defineVitestConfig({
  test: {
    coverage: {
      provider: 'v8',
      include: ['app/**', 'composables/**', 'server/**'],
      exclude: ['**/*.d.ts', '**/*.test.ts', 'node_modules/**'],
      thresholds: {
        statements: 60,
        branches: 50,
        functions: 60,
        lines: 60,
      },
    },
  },
})

// ❌ 描述实现
it('calls useFetch with correct URL')
 
// ✅ 描述行为
it('displays video title from API response')
it('shows error message when video not found')
it('redirects to login when not authenticated')

it('filters videos by tag', async () => {
  // Arrange：准备数据和环境
  const wrapper = await mountSuspended(VideoList, {
    props: { tag: 'AI' },
  })
 
  // Act：执行操作
  await wrapper.find('[data-testid="filter-btn"]').trigger('click')
 
  // Assert：验证结果
  expect(wrapper.findAll('.video-card')).toHaveLength(3)
})