GitLab项目Vue 3组件测试指南

GitLab项目Vue 3组件测试指南

gitlabhq GitLab CE Mirror | Please open new issues in our issue tracker on GitLab.com 项目地址: https://gitcode.com/gh_mirrors/gi/gitlabhq

前言

随着GitLab项目逐步迁移到Vue 3技术栈，确保测试在Vue 3模式下通过变得尤为重要。本文将详细介绍GitLab项目中Vue 3组件的测试策略、常见问题及解决方案，帮助开发者编写和维护高质量的Vue 3组件测试。

Vue 3测试运行方式

在GitLab项目中运行Vue 3单元测试非常简单，只需在执行jest命令时设置VUE_VERSION环境变量为3：

VUE_VERSION=3 yarn jest [文件路径]

项目CI流水线会严格执行以下检查：

1. 新增测试文件必须在Vue 3模式下通过
2. 原有测试文件如果在Vue 3模式下从通过变为不通过
3. 隔离列表中已知失败的测试如果现在通过但未被移除

测试注意事项

模拟组合式API时的引用管理

测试Vue 3的组合式函数(composables)时，经常需要模拟其返回的ref或computed值。这里有一个关键点需要注意：

// 组合式函数示例
export const useCounter = () => {
  const counter = ref(1)
  const increase = () => { counter.value += 1 }
  return { counter, increase }
}

在测试组件时，如果模拟了这个组合式函数，必须在顶层beforeEach中重置ref值，否则测试之间会产生状态污染：

describe('MyComponent', () => {
  const counter = ref(undefined) // 初始化为undefined更安全
  
  beforeEach(() => {
    counter.value = 1 // 每次测试前重置
    useCounter.mockReturnValue({
      counter,
      increase: jest.fn()
    })
  })
  
  // 测试用例...
})

Vue Router测试

使用Vue Router 4进行测试时，需注意以下要点：

1. 异步导航：所有导航操作都是异步的，必须使用await等待完成
2. 初始路由：默认会导航到/路由，如果未定义会报错
3. 导航守卫：必须精确调用一次next函数

测试示例：

it('导航到/create页面', async () => {
  expect(findWorkspacesListPage().exists()).toBe(true)
  
  await findNewWorkspaceButton().trigger('click')
  await waitForPromises() // 等待导航完成
  
  expect(findCreateWorkspacePage().exists()).toBe(true)
})

Vue Apollo测试问题

当测试涉及Apollo缓存更新的组件时，可能会遇到代理错误。这是因为Apollo尝试修改Vue的响应式对象。解决方案：

1. 优先方案：仅使用Apollo缓存中已有的数据
2. 备选方案：使用cloneDeep移除响应式代理

错误示例：

// 错误：直接使用组件属性(响应式对象)
mappedAgents.nodes.push(this.agent) 

正确做法：

// 正确：使用缓存中的数据
const targetAgentIndex = removeFrom.nodes.findIndex(node => node.id === agent.id)
mappedAgents.nodes.push(removeFrom.nodes[targetAgentIndex])

测试调试技巧

当遇到难以理解的Vue Router错误时，可以临时覆盖console.warn来获取更详细的错误信息：

console.warn = jest.fn()

afterEach(() => {
  console.log(console.warn.mock.calls) // 查看警告日志
})

隔离列表管理

项目维护了一个quarantined_vue3_specs.txt文件，包含已知在Vue 3模式下失败的测试。这个列表应该只减不增：

• 移除规则：当测试在Vue 3模式下通过时，应立即从列表中移除
• 添加规则：原则上不允许添加新项，新增失败测试应该直接修复

最佳实践总结

1. 状态隔离：始终重置测试间的共享状态
2. 异步等待：正确处理Vue Router和Apollo的异步操作
3. 避免响应式陷阱：注意Vue响应式系统与第三方库的交互
4. 渐进完善：持续将测试从隔离列表中移除，提高Vue 3兼容性

通过遵循这些指南，开发者可以确保GitLab项目中的Vue组件在Vue 2和Vue 3环境下都能可靠运行，为平稳过渡到Vue 3奠定坚实基础。

gitlabhq GitLab CE Mirror | Please open new issues in our issue tracker on GitLab.com 项目地址: https://gitcode.com/gh_mirrors/gi/gitlabhq