一、引言

1.1 Vue单元测试的重要性

1.2 技术价值与市场分析

class VueTestingAnalysis {
    /** 单元测试市场分析 */
    static getMarketAnalysis() {
        return {
            '测试覆盖率要求': '企业级项目通常要求80%+测试覆盖率',
            '开发效率提升': '自动化测试减少手动测试时间60-70%',
            'BUG发现成本': '单元测试发现的BUG修复成本降低10倍',
            '重构安全性': '测试覆盖良好的项目重构成功率提升85%',
            '团队协作': '测试用例作为活文档提升团队协作效率'
        };
    }

    /** 测试方案对比 */
    static getTechnologyComparison() {
        return {
            'Jest + Vue Test Utils vs 手动测试': {
                '执行速度': '⭐⭐⭐⭐⭐ vs ⭐',
                '覆盖范围': '⭐⭐⭐⭐⭐ vs ⭐⭐',
                '可维护性': '⭐⭐⭐⭐⭐ vs ⭐',
                '自动化程度': '⭐⭐⭐⭐⭐ vs ⭐',
                '回归测试': '⭐⭐⭐⭐⭐ vs ⭐⭐'
            },
            'Jest vs Mocha': {
                '配置简单性': '⭐⭐⭐⭐⭐ vs ⭐⭐⭐',
                '内置断言': '⭐⭐⭐⭐⭐ vs ⭐⭐',
                '快照测试': '⭐⭐⭐⭐⭐ vs ⭐⭐⭐',
                '并行执行': '⭐⭐⭐⭐⭐ vs ⭐⭐⭐',
                '监控模式': '⭐⭐⭐⭐⭐ vs ⭐⭐⭐⭐'
            },
            'Vue Test Utils vs 原生测试': {
                '组件挂载': '⭐⭐⭐⭐⭐ vs ⭐⭐',
                'DOM操作': '⭐⭐⭐⭐⭐ vs ⭐⭐⭐',
                '事件模拟': '⭐⭐⭐⭐⭐ vs ⭐⭐',
                '异步处理': '⭐⭐⭐⭐⭐ vs ⭐⭐⭐',
                'Vue特性支持': '⭐⭐⭐⭐⭐ vs ⭐'
            }
        };
    }

    /** 业务价值分析 */
    static getBusinessValue() {
        return {
            '产品质量': '测试覆盖提升产品质量和稳定性',
            '开发效率': '自动化测试加速开发迭代周期',
            '团队信心': '完善的测试套件增强团队重构信心',
            '客户信任': '高质量代码提升客户信任度',
            '技术债务': '及时测试减少技术债务积累'
        };
    }
}

1.3 测试覆盖率与质量指标

二、技术背景

2.1 Jest + Vue Test Utils 架构

graph TB
    A[Vue单元测试架构] --> B[测试框架层]
    A --> C[工具库层]
    A --> D[实用工具层]
    A --> E[配置层]
    
    B --> B1[Jest测试框架]
    B --> B2[断言库]
    B --> B3[Mock系统]
    B --> B4[覆盖率报告]
    
    C --> C1[Vue Test Utils]
    C --> C2[Vue Jest]
    C --> C3[Testing Library]
    C --> C4[Axios Mock]
    
    D --> D1[测试工具函数]
    D --> D2[测试数据工厂]
    D --> D3[快照序列化]
    D --> D4[自定义匹配器]
    
    E --> E1[Jest配置]
    E --> E2[Babel配置]
    E --> E3[Vue配置]
    E --> E4[环境变量]
    
    B1 --> F[测试运行]
    C1 --> F
    D1 --> F
    
    F --> G[测试报告]

2.2 核心技术栈

// 测试技术栈配置
export const TestingTechStack = {
    // 测试框架
    jest: {
        version: '^29.0.0',
        features: [
            '零配置启动',
            '快速测试执行',
            '并行测试运行',
            '智能监控模式',
            '快照测试'
        ]
    },
    
    // Vue测试工具
    vueTestUtils: {
        version: '^2.0.0',
        features: [
            '组件挂载',
            'DOM查询',
            '事件触发',
            '异步处理',
            'Vuex集成'
        ]
    },
    
    // 测试类型支持
    testingTypes: {
        unit: ['组件逻辑', '工具函数', '计算属性'],
        integration: ['组件交互', '父子通信', '事件处理'],
        snapshot: ['UI一致性', '意外变更检测'],
        e2e: ['用户流程', '端到端测试']
    },
    
    // 测试工具库
    utilities: {
        mocks: ['模块模拟', '函数模拟', '定时器模拟'],
        factories: ['测试数据工厂', '组件工厂'],
        helpers: ['测试工具函数', '自定义匹配器']
    }
};

三、环境准备与配置

3.1 项目依赖配置

// package.json
{
  "name": "vue3-jest-testing",
  "version": "1.0.0",
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:ui": "jest --watchAll",
    "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
  },
  "devDependencies": {
    "@vue/test-utils": "^2.4.0",
    "jest": "^29.0.0",
    "vue-jest": "^5.0.0",
    "@vue/vue3-jest": "^29.0.0",
    "babel-jest": "^29.0.0",
    "@babel/preset-env": "^7.20.0",
    "jest-environment-jsdom": "^29.0.0",
    "jest-transform-stub": "^2.0.0",
    "identity-obj-proxy": "^3.0.0"
  },
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

3.2 Jest配置文件

// jest.config.js
module.exports = {
  // 测试环境
  testEnvironment: 'jsdom',
  
  // 模块文件扩展名
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  
  // 模块名称映射
  moduleNameMapping: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js'
  },
  
  // 转换配置
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': '@vue/vue3-jest'
  },
  
  // 测试文件匹配模式
  testMatch: [
    '**/__tests__/**/*.spec.js',
    '**/__tests__/**/*.test.js'
  ],
  
  // 收集覆盖率
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ],
  
  // 覆盖率报告目录
  coverageDirectory: 'coverage',
  
  // 覆盖率阈值
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  },
  
  // 测试运行前执行的文件
  setupFilesAfterEnv: ['<rootDir>/test/jest.setup.js'],
  
  // 监控模式忽略的文件
  watchPathIgnorePatterns: [
    '<rootDir>/node_modules/'
  ],
  
  // 慢测试阈值（毫秒）
  slowTestThreshold: 5000
};

3.3 测试环境配置

// test/jest.setup.js
import { config } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'
import { createPinia } from 'pinia'

// 全局Vue Test Utils配置
config.global = {
  stubs: {
    transition: false,
    'transition-group': false
  },
  mocks: {
    $t: (key) => key
  },
  plugins: {
    pinia: createPinia(),
    i18n: createI18n({
      locale: 'zh-CN',
      messages: {}
    })
  }
}

// 全局测试辅助函数
global.testHelpers = {
  // 创建测试数据工厂
  createUser: (overrides = {}) => ({
    id: 1,
    name: '测试用户',
    email: 'test@example.com',
    ...overrides
  }),
  
  // 异步工具函数
  waitFor: (ms = 0) => new Promise(resolve => setTimeout(resolve, ms)),
  
  // DOM测试辅助
  findByTestId: (wrapper, testId) => wrapper.find(`[data-testid="${testId}"]`)
}

// 自定义匹配器
expect.extend({
  toHaveBeenCalledWithPayload(received, payload) {
    const pass = received.mock.calls.some(call =>
      JSON.stringify(call[0]) === JSON.stringify(payload)
    )
    
    return {
      pass,
      message: () => `期望函数被调用时包含payload: ${JSON.stringify(payload)}`
    }
  }
})

四、核心测试实现

4.1 基础组件测试

<!-- src/components/Button.vue -->
<template>
  <button
    :class="[
      'base-button',
      `button-${type}`,
      `button-${size}`,
      {
        'is-disabled': disabled,
        'is-loading': loading
      }
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
    data-testid="base-button"
  >
    <span v-if="loading" class="button-loading">
      <LoadingIcon />
    </span>
    <span class="button-content">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'primary', 'danger', 'warning'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    disabled: Boolean,
    loading: Boolean
  },
  emits: ['click'],
  methods: {
    handleClick(event) {
      if (!this.disabled && !this.loading) {
        this.$emit('click', event)
      }
    }
  }
}
</script>

// tests/unit/components/Button.spec.js
import { mount } from '@vue/test-utils'
import BaseButton from '@/components/Button.vue'

describe('BaseButton 组件测试', () => {
  // 基础渲染测试
  describe('渲染测试', () => {
    it('应该正确渲染按钮', () => {
      const wrapper = mount(BaseButton, {
        slots: {
          default: '点击我'
        }
      })
      
      expect(wrapper.exists()).toBe(true)
      expect(wrapper.text()).toContain('点击我')
      expect(wrapper.find('[data-testid="base-button"]').exists()).toBe(true)
    })
    
    it('应该根据props应用正确的class', () => {
      const wrapper = mount(BaseButton, {
        props: {
          type: 'primary',
          size: 'large'
        }
      })
      
      const button = wrapper.find('button')
      expect(button.classes()).toContain('button-primary')
      expect(button.classes()).toContain('button-large')
    })
    
    it('应该在loading状态下显示加载图标', () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true }
      })
      
      expect(wrapper.find('.button-loading').exists()).toBe(true)
    })
  })
  
  // 交互测试
  describe('交互测试', () => {
    it('点击按钮应该触发click事件', async () => {
      const wrapper = mount(BaseButton)
      
      await wrapper.trigger('click')
      
      expect(wrapper.emitted('click')).toHaveLength(1)
    })
    
    it('禁用状态下点击不应该触发事件', async () => {
      const wrapper = mount(BaseButton, {
        props: { disabled: true }
      })
      
      await wrapper.trigger('click')
      
      expect(wrapper.emitted('click')).toBeUndefined()
    })
    
    it('加载状态下点击不应该触发事件', async () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true }
      })
      
      await wrapper.trigger('click')
      
      expect(wrapper.emitted('click')).toBeUndefined()
    })
  })
  
  // 快照测试
  describe('快照测试', () => {
    it('渲染快照应该匹配', () => {
      const wrapper = mount(BaseButton, {
        slots: { default: '保存' },
        props: { type: 'primary' }
      })
      
      expect(wrapper.html()).toMatchSnapshot()
    })
  })
})

4.2 复杂组件测试

<!-- src/components/UserForm.vue -->
<template>
  <form @submit.prevent="handleSubmit" data-testid="user-form">
    <div class="form-group">
      <label for="name">姓名</label>
      <input
        id="name"
        v-model="form.name"
        type="text"
        data-testid="name-input"
        :class="{ error: errors.name }"
      />
      <span v-if="errors.name" class="error-message" data-testid="name-error">
        {{ errors.name }}
      </span>
    </div>
    
    <div class="form-group">
      <label for="email">邮箱</label>
      <input
        id="email"
        v-model="form.email"
        type="email"
        data-testid="email-input"
        :class="{ error: errors.email }"
      />
      <span v-if="errors.email" class="error-message" data-testid="email-error">
        {{ errors.email }}
      </span>
    </div>
    
    <BaseButton type="submit" :loading="isSubmitting" data-testid="submit-button">
      提交
    </BaseButton>
  </form>
</template>

<script>
import { ref, reactive } from 'vue'
import BaseButton from './Button.vue'

export default {
  name: 'UserForm',
  components: { BaseButton },
  emits: ['submit'],
  setup(props, { emit }) {
    const isSubmitting = ref(false)
    const form = reactive({
      name: '',
      email: ''
    })
    const errors = reactive({})
    
    const validateForm = () => {
      errors.name = form.name ? '' : '姓名不能为空'
      errors.email = form.email ? 
        (/^\S+@\S+\.\S+$/.test(form.email) ? '' : '邮箱格式不正确') : 
        '邮箱不能为空'
      
      return !errors.name && !errors.email
    }
    
    const handleSubmit = async () => {
      if (!validateForm()) return
      
      isSubmitting.value = true
      try {
        await emit('submit', { ...form })
      } finally {
        isSubmitting.value = false
      }
    }
    
    return {
      form,
      errors,
      isSubmitting,
      handleSubmit
    }
  }
}
</script>

// tests/unit/components/UserForm.spec.js
import { mount } from '@vue/test-utils'
import UserForm from '@/components/UserForm.vue'
import BaseButton from '@/components/Button.vue'

describe('UserForm 组件测试', () => {
  let wrapper
  const mockSubmit = jest.fn()
  
  // 测试配置
  const createWrapper = (options = {}) => {
    return mount(UserForm, {
      global: {
        stubs: {
          BaseButton: true
        }
      },
      ...options
    })
  }
  
  beforeEach(() => {
    mockSubmit.mockClear()
  })
  
  afterEach(() => {
    wrapper?.unmount()
  })
  
  describe('表单验证测试', () => {
    it('空表单提交应该显示验证错误', async () => {
      wrapper = createWrapper()
      
      await wrapper.find('form').trigger('submit.prevent')
      
      expect(wrapper.find('[data-testid="name-error"]').exists()).toBe(true)
      expect(wrapper.find('[data-testid="email-error"]').exists()).toBe(true)
      expect(mockSubmit).not.toHaveBeenCalled()
    })
    
    it('无效邮箱应该显示错误', async () => {
      wrapper = createWrapper()
      
      await wrapper.find('[data-testid="name-input"]').setValue('张三')
      await wrapper.find('[data-testid="email-input"]').setValue('invalid-email')
      await wrapper.find('form').trigger('submit.prevent')
      
      expect(wrapper.find('[data-testid="email-error"]').text()).toContain('邮箱格式不正确')
      expect(mockSubmit).not.toHaveBeenCalled()
    })
    
    it('有效表单应该通过验证', async () => {
      wrapper = createWrapper({
        props: {
          onSubmit: mockSubmit
        }
      })
      
      await wrapper.find('[data-testid="name-input"]').setValue('张三')
      await wrapper.find('[data-testid="email-input"]').setValue('zhangsan@example.com')
      await wrapper.find('form').trigger('submit.prevent')
      
      expect(wrapper.find('[data-testid="name-error"]').exists()).toBe(false)
      expect(wrapper.find('[data-testid="email-error"]').exists()).toBe(false)
    })
  })
  
  describe('表单提交测试', () => {
    it('有效表单应该触发submit事件', async () => {
      wrapper = createWrapper()
      
      await wrapper.find('[data-testid="name-input"]').setValue('李四')
      await wrapper.find('[data-testid="email-input"]').setValue('lisi@example.com')
      await wrapper.find('form').trigger('submit.prevent')
      
      expect(wrapper.emitted('submit')).toHaveLength(1)
      expect(wrapper.emitted('submit')[0][0]).toEqual({
        name: '李四',
        email: 'lisi@example.com'
      })
    })
    
    it('提交过程中应该显示加载状态', async () => {
      wrapper = createWrapper({
        props: {
          onSubmit: () => new Promise(resolve => setTimeout(resolve, 100))
        }
      })
      
      await wrapper.find('[data-testid="name-input"]').setValue('王五')
      await wrapper.find('[data-testid="email-input"]').setValue('wangwu@example.com')
      wrapper.find('form').trigger('submit.prevent')
      
      await wrapper.vm.$nextTick()
      
      expect(wrapper.find('[data-testid="submit-button"]').attributes('loading')).toBeDefined()
    })
  })
  
  describe('集成测试', () => {
    it('应该正确集成BaseButton组件', async () => {
      wrapper = mount(UserForm)
      
      const button = wrapper.findComponent(BaseButton)
      expect(button.exists()).toBe(true)
      expect(button.props('type')).toBe('submit')
    })
  })
})

4.3 组合式API测试

// src/composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const history = ref([])
  
  const increment = (step = 1) => {
    count.value += step
    history.value.push(`增加 ${step}`)
  }
  
  const decrement = (step = 1) => {
    count.value -= step
    history.value.push(`减少 ${step}`)
  }
  
  const reset = () => {
    count.value = initialValue
    history.value.push('重置')
  }
  
  const canUndo = computed(() => history.value.length > 0)
  
  const undo = () => {
    if (canUndo.value) {
      history.value.pop()
      // 简化实现，实际应该根据历史记录恢复状态
      count.value = initialValue
    }
  }
  
  return {
    count: readonly(count),
    history: readonly(history),
    increment,
    decrement,
    reset,
    canUndo,
    undo
  }
}

// tests/unit/composables/useCounter.spec.js
import { useCounter } from '@/composables/useCounter'
import { ref } from 'vue'

// 测试组合式函数
describe('useCounter 组合式函数测试', () => {
  let counter
  
  beforeEach(() => {
    counter = useCounter(10)
  })
  
  describe('基础功能测试', () => {
    it('应该使用初始值', () => {
      expect(counter.count.value).toBe(10)
    })
    
    it('增加计数应该工作正常', () => {
      counter.increment()
      expect(counter.count.value).toBe(11)
      
      counter.increment(5)
      expect(counter.count.value).toBe(16)
    })
    
    it('减少计数应该工作正常', () => {
      counter.decrement()
      expect(counter.count.value).toBe(9)
      
      counter.decrement(3)
      expect(counter.count.value).toBe(6)
    })
    
    it('重置应该恢复初始值', () => {
      counter.increment(5)
      counter.reset()
      
      expect(counter.count.value).toBe(10)
    })
  })
  
  describe('历史记录测试', () => {
    it('操作应该记录历史', () => {
      counter.increment(2)
      counter.decrement(1)
      counter.reset()
      
      expect(counter.history.value).toEqual([
        '增加 2',
        '减少 1',
        '重置'
      ])
    })
    
    it('撤销功能应该工作正常', () => {
      counter.increment(5)
      expect(counter.canUndo.value).toBe(true)
      
      counter.undo()
      expect(counter.count.value).toBe(10)
    })
  })
  
  describe('响应式测试', () => {
    it('count应该是只读的', () => {
      expect(() => {
        counter.count.value = 20
      }).toThrow()
    })
    
    it('历史记录应该是只读的', () => {
      expect(() => {
        counter.history.value.push('非法操作')
      }).toThrow()
    })
  })
})

4.4 Vuex Store测试

// tests/unit/store/user.spec.js
import { createStore } from 'vuex'
import userModule from '@/store/modules/user'

describe('User Store 模块测试', () => {
  let store
  
  beforeEach(() => {
    store = createStore({
      modules: {
        user: {
          ...userModule,
          namespaced: true
        }
      }
    })
  })
  
  describe('state 测试', () => {
    it('应该包含正确的初始状态', () => {
      expect(store.state.user).toEqual({
        currentUser: null,
        isLoggedIn: false,
        loading: false
      })
    })
  })
  
  describe('mutations 测试', () => {
    it('SET_USER 应该设置当前用户', () => {
      const user = { id: 1, name: '测试用户' }
      
      store.commit('user/SET_USER', user)
      
      expect(store.state.user.currentUser).toEqual(user)
      expect(store.state.user.isLoggedIn).toBe(true)
    })
    
    it('SET_LOADING 应该设置加载状态', () => {
      store.commit('user/SET_LOADING', true)
      expect(store.state.user.loading).toBe(true)
    })
  })
  
  describe('actions 测试', () => {
    beforeEach(() => {
      // 模拟API调用
      jest.spyOn(api, 'login').mockResolvedValue({ user: { id: 1, name: '测试用户' } })
      jest.spyOn(api, 'logout').mockResolvedValue()
    })
    
    it('login 应该成功登录', async () => {
      const credentials = { username: 'test', password: 'password' }
      
      await store.dispatch('user/login', credentials)
      
      expect(api.login).toHaveBeenCalledWith(credentials)
      expect(store.state.user.isLoggedIn).toBe(true)
      expect(store.state.user.currentUser).toEqual({ id: 1, name: '测试用户' })
    })
    
    it('logout 应该成功登出', async () => {
      // 先登录
      store.commit('user/SET_USER', { id: 1, name: '测试用户' })
      
      await store.dispatch('user/logout')
      
      expect(api.logout).toHaveBeenCalled()
      expect(store.state.user.isLoggedIn).toBe(false)
      expect(store.state.user.currentUser).toBeNull()
    })
  })
  
  describe('getters 测试', () => {
    it('userInfo 应该返回用户信息', () => {
      const user = { id: 1, name: '测试用户', email: 'test@example.com' }
      store.commit('user/SET_USER', user)
      
      expect(store.getters['user/userInfo']).toEqual(user)
    })
    
    it('isAdmin 应该检查管理员权限', () => {
      store.commit('user/SET_USER', { role: 'admin' })
      expect(store.getters['user/isAdmin']).toBe(true)
      
      store.commit('user/SET_USER', { role: 'user' })
      expect(store.getters['user/isAdmin']).toBe(false)
    })
  })
})

五、高级测试技巧

5.1 异步测试

// tests/unit/components/AsyncComponent.spec.js
import { mount, flushPromises } from '@vue/test-utils'
import AsyncComponent from '@/components/AsyncComponent.vue'

describe('AsyncComponent 异步测试', () => {
  it('应该处理异步数据加载', async () => {
    // 模拟API
    jest.spyOn(api, 'fetchData').mockResolvedValue({ data: '测试数据' })
    
    const wrapper = mount(AsyncComponent)
    
    // 等待异步操作完成
    await flushPromises()
    
    expect(wrapper.text()).toContain('测试数据')
    expect(wrapper.find('.loading').exists()).toBe(false)
  })
  
  it('应该处理加载状态', async () => {
    // 模拟延迟
    jest.spyOn(api, 'fetchData').mockImplementation(() => 
      new Promise(resolve => setTimeout(() => resolve({ data: '数据' }), 100))
    )
    
    const wrapper = mount(AsyncComponent)
    
    // 立即检查加载状态
    expect(wrapper.find('.loading').exists()).toBe(true)
    
    // 等待完成
    await flushPromises()
    expect(wrapper.find('.loading').exists()).toBe(false)
  })
  
  it('应该处理错误状态', async () => {
    jest.spyOn(api, 'fetchData').mockRejectedValue(new Error('获取失败'))
    
    const wrapper = mount(AsyncComponent)
    await flushPromises()
    
    expect(wrapper.find('.error').exists()).toBe(true)
    expect(wrapper.text()).toContain('获取失败')
  })
})

5.2 路由测试

// tests/unit/components/RouterLink.spec.js
import { mount, createRouter, createWebHistory } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import RouterLink from '@/components/RouterLink.vue'

describe('RouterLink 路由测试', () => {
  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: { template: 'Home' } },
      { path: '/about', component: { template: 'About' } }
    ]
  })
  
  it('应该正确渲染路由链接', async () => {
    const wrapper = mount(RouterLink, {
      global: {
        plugins: [router, createTestingPinia()]
      },
      props: {
        to: '/about'
      },
      slots: {
        default: '关于我们'
      }
    })
    
    await router.isReady()
    
    const link = wrapper.find('a')
    expect(link.attributes('href')).toBe('/about')
    expect(link.text()).toBe('关于我们')
  })
  
  it('点击应该导航到目标路由', async () => {
    const wrapper = mount(RouterLink, {
      global: {
        plugins: [router, createTestingPinia()]
      },
      props: {
        to: '/about'
      }
    })
    
    await router.isReady()
    
    // 模拟点击
    await wrapper.trigger('click')
    
    // 验证路由变化
    expect(router.currentRoute.value.path).toBe('/about')
  })
})

5.3 测试工具函数

// test/utils/test-utils.js
import { config } from '@vue/test-utils'

/**
 * 创建测试组件工厂
 */
export function createComponentFactory(Component, defaultOptions = {}) {
  return (options = {}) => {
    return mount(Component, {
      ...defaultOptions,
      ...options
    })
  }
}

/**
 * 等待Vue更新
 */
export const nextTick = () => new Promise(resolve => setTimeout(resolve, 0))

/**
 * 模拟用户输入
 */
export const simulateInput = async (wrapper, selector, value) => {
  const input = wrapper.find(selector)
  await input.setValue(value)
  await input.trigger('input')
  await nextTick()
}

/**
 * 模拟表单提交
 */
export const simulateFormSubmit = async (wrapper, formSelector = 'form') => {
  const form = wrapper.find(formSelector)
  await form.trigger('submit.prevent')
  await nextTick()
}

/**
 * 自定义匹配器
 */
export const customMatchers = {
  toHaveBeenCalledWithPayload(received, payload) {
    const pass = received.mock.calls.some(call =>
      JSON.stringify(call[0]) === JSON.stringify(payload)
    )
    
    return {
      pass,
      message: () => `期望函数被调用时包含payload: ${JSON.stringify(payload)}`
    }
  },
  
  toHaveTextContent(received, text) {
    const actualText = received.text().trim()
    const pass = actualText.includes(text)
    
    return {
      pass,
      message: () => `期望元素包含文本 "${text}"，实际是 "${actualText}"`
    }
  }
}

// 注册自定义匹配器
beforeAll(() => {
  expect.extend(customMatchers)
})

六、测试覆盖率与报告

6.1 覆盖率配置

// jest.config.js
module.exports = {
  // ... 其他配置
  
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!src/store/index.js',
    '!src/**/*.spec.js',
    '!src/**/*.test.js',
    '!**/node_modules/**'
  ],
  
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    },
    './src/components/': {
      branches: 85,
      functions: 85,
      lines: 85,
      statements: 85
    }
  },
  
  coverageReporters: [
    'text',
    'text-summary',
    'html',
    'lcov'
  ]
}

6.2 测试报告示例

// 测试报告输出示例
const testReport = {
  summary: {
    totalSuites: 15,
    totalTests: 127,
    totalPassed: 125,
    totalFailed: 2,
    totalPending: 0,
    totalSkipped: 0,
    successRate: '98.4%'
  },
  coverage: {
    statements: { covered: 345, total: 400, percentage: '86.3%' },
    branches: { covered: 120, total: 150, percentage: '80.0%' },
    functions: { covered: 89, total: 100, percentage: '89.0%' },
    lines: { covered: 330, total: 400, percentage: '82.5%' }
  },
  timing: {
    startTime: '2023-10-01T10:00:00.000Z',
    endTime: '2023-10-01T10:02:30.000Z',
    duration: '2分30秒'
  }
}

七、持续集成配置

7.1 GitHub Actions配置

# .github/workflows/test.yml
name: Vue Unit Tests

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [16.x, 18.x]
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Run unit tests
      run: npm run test:coverage
    
    - name: Upload coverage reports
      uses: codecov/codecov-action@v3
      with:
        file: ./coverage/lcov.info
    
    - name: Upload test results
      uses: actions/upload-artifact@v3
      with:
        name: test-results
        path: |
          coverage/
          junit.xml

八、总结

8.1 技术成果总结

核心测试能力

• •
  组件单元测试：覆盖组件渲染、交互、事件处理
• •
  组合式API测试：测试响应式逻辑和业务逻辑
• •
  Vuex Store测试：状态管理完整测试覆盖
• •
  异步操作测试：处理Promise、定时器等异步场景
• •
  路由和导航测试：验证页面导航和路由逻辑

测试质量指标

8.2 最佳实践总结

测试策略最佳实践

class TestingBestPractices {
    /** 测试金字塔策略 */
    static getTestingPyramid() {
        return {
            '单元测试 (70%)': [
                '快速执行',
                '低成本维护',
                '早期问题发现',
                '开发阶段运行'
            ],
            '集成测试 (20%)': [
                '组件间交互',
                'API调用验证',
                '用户操作流程',
                'CI环境运行'
            ],
            'E2E测试 (10%)': [
                '关键用户流程',
                '生产环境验证',
                '手动测试替代',
                '预发布环境运行'
            ]
        };
    }
    
    /** 测试命名规范 */
    static getNamingConventions() {
        return {
            '测试文件': 'ComponentName.spec.js 或 ComponentName.test.js',
            '测试套件': '描述被测试单元的功能',
            '测试用例': '应该... 当... 给定...',
            '描述结构': '描述 > 当 > 应该'
        };
    }
    
    /** 测试数据管理 */
    static getTestDataManagement() {
        return {
            '工厂函数': '创建可复用的测试数据',
            '固定数据': '已知输入的预期输出',
            '随机数据': '边界情况和异常输入',
            '清理策略': '每个测试后重置状态'
        };
    }
}

8.3 未来展望

测试技术趋势

class TestingFutureTrends {
    /** 测试技术演进 */
    static getTechnologyTrends() {
        return {
            '2024': [
                '组件测试的进一步简化',
                'AI辅助测试用例生成',
                '可视化测试报告',
                '性能测试集成'
            ],
            '2025': [
                '智能测试覆盖率分析',
                '自动化测试优化',
                '跨平台测试统一',
                '云测试基础设施'
            ]
        };
    }
    
    /** 开发体验改进 */
    static getDevelopmentExperience() {
        return {
            '智能提示': '测试代码的智能补全和重构',
            '实时反馈': '保存时自动运行相关测试',
            '可视化调试': '测试执行的图形化展示',
            '协作测试': '团队测试用例共享和评审'
        };
    }
}