Vue测试踩坑

11.1 Vue单元测试的常见错误

核心知识点

• Vue单元测试的基本原理
• 测试框架的选择和配置
• 测试用例的编写规范

常见错误场景

错误场景1：没有正确挂载Vue组件

// 错误：没有正确挂载组件
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld)
    // 错误：没有传递props
    expect(wrapper.text()).toMatch(msg)
  })
})

错误原因：没有正确传递props给组件，导致测试失败。

正确实现：

// 正确：正确挂载组件并传递props
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg } // 正确传递props
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

错误场景2：使用错误的选择器

// 错误：使用错误的选择器
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('has a button', () => {
    const wrapper = shallowMount(HelloWorld)
    // 错误：使用了不存在的选择器
    expect(wrapper.find('.btn-primary').exists()).toBe(true)
  })
})

错误原因：使用了组件中不存在的选择器，导致测试失败。

正确实现：

// 正确：使用正确的选择器
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('has a button', () => {
    const wrapper = shallowMount(HelloWorld)
    // 正确：使用组件中存在的选择器
    expect(wrapper.find('button').exists()).toBe(true)
  })
})

11.2 Vue集成测试的使用误区

核心知识点

• Vue集成测试的概念和范围
• 集成测试的工具和配置
• 测试环境的搭建

常见错误场景

错误场景1：测试范围过大

// 错误：测试范围过大
import { mount } from '@vue/test-utils'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'

describe('App.vue', () => {
  test('full app integration', () => {
    const wrapper = mount(App, {
      global: {
        plugins: [router, store]
      }
    })
    // 错误：测试了太多功能，难以定位问题
    expect(wrapper.text()).toContain('Welcome')
    wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('Clicked')
    wrapper.find('a').trigger('click')
    expect(router.currentRoute.value.path).toBe('/about')
  })
})

错误原因：测试范围过大，包含了太多功能，一旦失败难以定位具体问题。

正确实现：

// 正确：测试范围适中
import { mount } from '@vue/test-utils'
import App from '@/App.vue'

describe('App.vue', () => {
  test('renders welcome message', () => {
    const wrapper = mount(App)
    expect(wrapper.text()).toContain('Welcome')
  })
  
  test('handles button click', () => {
    const wrapper = mount(App)
    wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('Clicked')
  })
})

错误场景2：没有模拟外部依赖

// 错误：没有模拟外部依赖
import { mount } from '@vue/test-utils'
import UserProfile from '@/components/UserProfile.vue'
import axios from 'axios'

describe('UserProfile.vue', () => {
  test('fetches user data', async () => {
    const wrapper = mount(UserProfile)
    // 错误：没有模拟axios，会发送真实请求
    await wrapper.vm.fetchUser()
    expect(wrapper.text()).toContain('John Doe')
  })
})

错误原因：没有模拟axios，会发送真实的网络请求，导致测试不稳定。

正确实现：

// 正确：模拟外部依赖
import { mount } from '@vue/test-utils'
import UserProfile from '@/components/UserProfile.vue'
import axios from 'axios'

// 模拟axios
jest.mock('axios')

describe('UserProfile.vue', () => {
  test('fetches user data', async () => {
    // 模拟响应
    const mockResponse = {
      data: { name: 'John Doe' }
    }
    axios.get.mockResolvedValue(mockResponse)
    
    const wrapper = mount(UserProfile)
    await wrapper.vm.fetchUser()
    expect(wrapper.text()).toContain('John Doe')
  })
})

11.3 Vue组件测试的陷阱

核心知识点

• Vue组件测试的策略
• 组件交互的测试方法
• 组件状态的测试技巧

常见错误场景

错误场景1：没有测试组件的交互行为

// 错误：只测试了渲染，没有测试交互
import { shallowMount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'

describe('Counter.vue', () => {
  test('renders initial count', () => {
    const wrapper = shallowMount(Counter)
    expect(wrapper.text()).toContain('Count: 0')
  })
})

错误原因：只测试了组件的初始渲染，没有测试组件的交互行为，测试覆盖率不足。

正确实现：

// 正确：测试组件的交互行为
import { shallowMount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'

describe('Counter.vue', () => {
  test('renders initial count', () => {
    const wrapper = shallowMount(Counter)
    expect(wrapper.text()).toContain('Count: 0')
  })
  
  test('increments count when button is clicked', async () => {
    const wrapper = shallowMount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('Count: 1')
  })
})

错误场景2：没有测试组件的生命周期钩子

// 错误：没有测试生命周期钩子
import { shallowMount } from '@vue/test-utils'
import LifecycleComponent from '@/components/LifecycleComponent.vue'

describe('LifecycleComponent.vue', () => {
  test('renders', () => {
    const wrapper = shallowMount(LifecycleComponent)
    expect(wrapper.exists()).toBe(true)
  })
})

错误原因：没有测试组件的生命周期钩子，可能导致生命周期中的逻辑问题未被发现。

正确实现：

// 正确：测试生命周期钩子
import { shallowMount } from '@vue/test-utils'
import LifecycleComponent from '@/components/LifecycleComponent.vue'

describe('LifecycleComponent.vue', () => {
  test('calls mounted hook', () => {
    const mountedSpy = jest.spyOn(LifecycleComponent.methods, 'fetchData')
    const wrapper = shallowMount(LifecycleComponent)
    expect(mountedSpy).toHaveBeenCalled()
  })
})

11.4 Vue测试工具的配置问题

核心知识点

• Vue测试工具的安装和配置
• Jest的配置和使用
• Vue Test Utils的高级配置

常见错误场景

错误场景1：Jest配置错误

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  // 错误：配置了不存在的选项
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
}

错误原因：配置了不存在的选项或配置格式错误，导致测试无法运行。

正确实现：

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  // 正确：使用正确的配置格式
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

错误场景2：Vue Test Utils版本不兼容

// 错误：使用了不兼容的API
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('renders', () => {
    // 错误：Vue Test Utils 2.0+的API已更改
    const wrapper = mount(HelloWorld, {
      propsData: { msg: 'Hello' } // 旧版API
    })
    expect(wrapper.exists()).toBe(true)
  })
})

错误原因：使用了旧版本的API，与当前版本的Vue Test Utils不兼容。

正确实现：

// 正确：使用兼容的API
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('renders', () => {
    // 正确：使用Vue Test Utils 2.0+的API
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Hello' } // 新版API
    })
    expect(wrapper.exists()).toBe(true)
  })
})

11.5 Vue测试覆盖率的误区

核心知识点

• 测试覆盖率的概念和计算方法
• 覆盖率报告的解读
• 提高覆盖率的策略

常见错误场景

错误场景1：盲目追求100%覆盖率

// 错误：为了覆盖率而测试
import { shallowMount } from '@vue/test-utils'
import Utils from '@/utils'

describe('Utils.js', () => {
  test('covers all functions', () => {
    // 错误：没有实际测试功能，只是为了覆盖率
    expect(Utils.add(1, 2)).toBe(3)
    expect(Utils.subtract(3, 1)).toBe(2)
    expect(Utils.multiply(2, 3)).toBe(6)
    expect(Utils.divide(6, 2)).toBe(3)
  })
})

错误原因：盲目追求100%的测试覆盖率，而忽略了测试的质量和有效性。

正确实现：

// 正确：测试功能的各种场景
import { shallowMount } from '@vue/test-utils'
import Utils from '@/utils'

describe('Utils.js', () => {
  test('adds numbers correctly', () => {
    expect(Utils.add(1, 2)).toBe(3)
    expect(Utils.add(-1, 1)).toBe(0)
    expect(Utils.add(0, 0)).toBe(0)
  })
  
  test('subtracts numbers correctly', () => {
    expect(Utils.subtract(3, 1)).toBe(2)
    expect(Utils.subtract(1, 3)).toBe(-2)
  })
  
  test('multiplies numbers correctly', () => {
    expect(Utils.multiply(2, 3)).toBe(6)
    expect(Utils.multiply(-2, 3)).toBe(-6)
  })
  
  test('divides numbers correctly', () => {
    expect(Utils.divide(6, 2)).toBe(3)
    expect(() => Utils.divide(6, 0)).toThrow()
  })
})

错误场景2：忽略分支覆盖率

// 错误：忽略了分支覆盖率
import { shallowMount } from '@vue/test-utils'
import Calculator from '@/components/Calculator.vue'

describe('Calculator.vue', () => {
  test('adds numbers', () => {
    const wrapper = shallowMount(Calculator)
    wrapper.vm.num1 = 1
    wrapper.vm.num2 = 2
    wrapper.vm.operation = 'add'
    wrapper.vm.calculate()
    expect(wrapper.vm.result).toBe(3)
  })
})

错误原因：只测试了加法操作，没有测试其他操作，分支覆盖率低。

正确实现：

// 正确：测试所有分支
import { shallowMount } from '@vue/test-utils'
import Calculator from '@/components/Calculator.vue'

describe('Calculator.vue', () => {
  test('adds numbers', () => {
    const wrapper = shallowMount(Calculator)
    wrapper.vm.num1 = 1
    wrapper.vm.num2 = 2
    wrapper.vm.operation = 'add'
    wrapper.vm.calculate()
    expect(wrapper.vm.result).toBe(3)
  })
  
  test('subtracts numbers', () => {
    const wrapper = shallowMount(Calculator)
    wrapper.vm.num1 = 3
    wrapper.vm.num2 = 1
    wrapper.vm.operation = 'subtract'
    wrapper.vm.calculate()
    expect(wrapper.vm.result).toBe(2)
  })
  
  test('multiplies numbers', () => {
    const wrapper = shallowMount(Calculator)
    wrapper.vm.num1 = 2
    wrapper.vm.num2 = 3
    wrapper.vm.operation = 'multiply'
    wrapper.vm.calculate()
    expect(wrapper.vm.result).toBe(6)
  })
  
  test('divides numbers', () => {
    const wrapper = shallowMount(Calculator)
    wrapper.vm.num1 = 6
    wrapper.vm.num2 = 2
    wrapper.vm.operation = 'divide'
    wrapper.vm.calculate()
    expect(wrapper.vm.result).toBe(3)
  })
})

11.6 Vue模拟数据的使用陷阱

核心知识点

• 模拟数据的概念和作用
• 模拟数据的创建和管理
• 模拟数据的使用方法

常见错误场景

错误场景1：模拟数据过于简单

// 错误：模拟数据过于简单
import { mount } from '@vue/test-utils'
import UserList from '@/components/UserList.vue'
import axios from 'axios'

jest.mock('axios')

describe('UserList.vue', () => {
  test('renders user list', async () => {
    // 错误：模拟数据过于简单，没有覆盖所有字段
    const mockUsers = [{ id: 1, name: 'John' }]
    axios.get.mockResolvedValue({ data: mockUsers })
    
    const wrapper = mount(UserList)
    await wrapper.vm.fetchUsers()
    expect(wrapper.text()).toContain('John')
  })
})

错误原因：模拟数据过于简单，没有包含组件需要的所有字段，可能导致测试不全面。

正确实现：

// 正确：使用完整的模拟数据
import { mount } from '@vue/test-utils'
import UserList from '@/components/UserList.vue'
import axios from 'axios'

jest.mock('axios')

describe('UserList.vue', () => {
  test('renders user list', async () => {
    // 正确：使用完整的模拟数据
    const mockUsers = [
      { id: 1, name: 'John', email: 'john@example.com', age: 30 },
      { id: 2, name: 'Jane', email: 'jane@example.com', age: 25 }
    ]
    axios.get.mockResolvedValue({ data: mockUsers })
    
    const wrapper = mount(UserList)
    await wrapper.vm.fetchUsers()
    expect(wrapper.text()).toContain('John')
    expect(wrapper.text()).toContain('Jane')
  })
})

错误场景2：硬编码模拟数据

// 错误：硬编码模拟数据
import { mount } from '@vue/test-utils'
import ProductList from '@/components/ProductList.vue'
import axios from 'axios'

jest.mock('axios')

describe('ProductList.vue', () => {
  test('renders product list', async () => {
    // 错误：硬编码模拟数据，难以维护
    axios.get.mockResolvedValue({
      data: [
        { id: 1, name: 'Product 1', price: 100 },
        { id: 2, name: 'Product 2', price: 200 }
      ]
    })
    
    const wrapper = mount(ProductList)
    await wrapper.vm.fetchProducts()
    expect(wrapper.text()).toContain('Product 1')
  })
})

错误原因：硬编码模拟数据，当数据结构变化时需要修改多个测试文件，难以维护。

正确实现：

// 正确：使用单独的模拟数据文件
import { mount } from '@vue/test-utils'
import ProductList from '@/components/ProductList.vue'
import axios from 'axios'
import { mockProducts } from '../mocks/data'

jest.mock('axios')

describe('ProductList.vue', () => {
  test('renders product list', async () => {
    // 正确：使用单独的模拟数据文件
    axios.get.mockResolvedValue({ data: mockProducts })
    
    const wrapper = mount(ProductList)
    await wrapper.vm.fetchProducts()
    expect(wrapper.text()).toContain('Product 1')
  })
})

// mocks/data.js
export const mockProducts = [
  { id: 1, name: 'Product 1', price: 100 },
  { id: 2, name: 'Product 2', price: 200 }
]

11.7 Vue测试环境的配置问题

核心知识点

• Vue测试环境的搭建
• 环境变量的配置
• 测试工具的安装和配置

常见错误场景

错误场景1：测试环境与生产环境配置不一致

// 错误：测试环境配置与生产环境不一致
// .env.test
VUE_APP_API_URL=http://localhost:3000/api

// 错误：在测试中硬编码了API URL
import { mount } from '@vue/test-utils'
import UserService from '@/services/UserService'

describe('UserService', () => {
  test('fetches users', async () => {
    // 错误：硬编码了API URL，与环境变量不一致
    const users = await UserService.getUsers()
    expect(users).toBeDefined()
  })
})

错误原因：测试环境配置与生产环境不一致，可能导致测试结果与实际运行结果不同。

正确实现：

// 正确：使用环境变量
// .env.test
VUE_APP_API_URL=http://localhost:3000/api

// 正确：在服务中使用环境变量
// services/UserService.js
export default {
  getUsers() {
    return axios.get(`${process.env.VUE_APP_API_URL}/users`)
  }
}

// 正确：在测试中模拟API调用
import { mount } from '@vue/test-utils'
import UserService from '@/services/UserService'
import axios from 'axios'

jest.mock('axios')

describe('UserService', () => {
  test('fetches users', async () => {
    const mockUsers = [{ id: 1, name: 'John' }]
    axios.get.mockResolvedValue({ data: mockUsers })
    
    const users = await UserService.getUsers()
    expect(users).toBeDefined()
  })
})

错误场景2：没有正确配置babel

// 错误：babel配置错误
// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

// 错误：测试中使用了ES6+特性但babel没有正确配置
import { mount } from '@vue/test-utils'
import AsyncComponent from '@/components/AsyncComponent.vue'

describe('AsyncComponent.vue', () => {
  test('renders', async () => {
    // 错误：async/await可能无法正常工作
    const wrapper = mount(AsyncComponent)
    await wrapper.vm.loadData()
    expect(wrapper.text()).toContain('Data loaded')
  })
})

错误原因：babel配置错误，导致测试中无法使用ES6+特性。

正确实现：

// 正确：正确配置babel
// babel.config.js
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'entry'
    }]
  ]
}

// 正确：测试可以正常使用ES6+特性
import { mount } from '@vue/test-utils'
import AsyncComponent from '@/components/AsyncComponent.vue'

describe('AsyncComponent.vue', () => {
  test('renders', async () => {
    const wrapper = mount(AsyncComponent)
    await wrapper.vm.loadData()
    expect(wrapper.text()).toContain('Data loaded')
  })
})

11.8 Vue端到端测试的误区

核心知识点

• Vue端到端测试的概念和作用
• 端到端测试的工具和配置
• 端到端测试的编写和执行

常见错误场景

错误场景1：测试过于依赖DOM结构

// 错误：测试过于依赖DOM结构
// cypress/integration/app.spec.js
describe('App', () => {
  it('loads successfully', () => {
    cy.visit('/')
    // 错误：过于依赖具体的DOM结构
    cy.get('.navbar > .container > .navbar-brand').should('contain', 'App')
    cy.get('.jumbotron > h1').should('contain', 'Welcome')
  })
})

错误原因：测试过于依赖具体的DOM结构，当DOM结构变化时测试会失败。

正确实现：

// 正确：使用更稳定的选择器
// cypress/integration/app.spec.js
describe('App', () => {
  it('loads successfully', () => {
    cy.visit('/')
    // 正确：使用数据属性或更稳定的选择器
    cy.get('[data-testid="navbar-brand"]').should('contain', 'App')
    cy.get('[data-testid="welcome-heading"]').should('contain', 'Welcome')
  })
})

错误场景2：测试执行速度过慢

// 错误：测试执行速度过慢
// cypress/integration/app.spec.js
describe('App', () => {
  it('tests full user flow', () => {
    cy.visit('/')
    cy.get('button').click()
    cy.get('input[name="email"]').type('test@example.com')
    cy.get('input[name="password"]').type('password')
    cy.get('form').submit()
    cy.get('.dashboard').should('exist')
    cy.get('.settings').click()
    cy.get('input[name="name"]').type('John Doe')
    cy.get('form').submit()
    cy.get('.success-message').should('exist')
  })
})

错误原因：测试执行了完整的用户流程，包含了太多步骤，导致测试执行速度过慢。

正确实现：

// 正确：拆分测试，提高执行速度
// cypress/integration/login.spec.js
describe('Login', () => {
  it('logs in successfully', () => {
    cy.visit('/login')
    cy.get('input[name="email"]').type('test@example.com')
    cy.get('input[name="password"]').type('password')
    cy.get('form').submit()
    cy.get('.dashboard').should('exist')
  })
})

// cypress/integration/settings.spec.js
describe('Settings', () => {
  beforeEach(() => {
    // 正确：使用cy.session或自定义命令登录
    cy.login('test@example.com', 'password')
    cy.visit('/settings')
  })
  
  it('updates user settings', () => {
    cy.get('input[name="name"]').type('John Doe')
    cy.get('form').submit()
    cy.get('.success-message').should('exist')
  })
})