单元测试之helper函数

在前端开发和测试（特别是在 Vitest 和 Vue/React 领域）中，Helper 函数（辅助函数）是一个非常实用的概念。

简单来说，Helper 函数就是**"为了让你少写重复代码，而提取出来的工具函数"**。

在单元测试的语境下，它通常指测试辅助函数 。它的核心目的是减少样板代码，让测试用例更简洁、更易读。

🤔 为什么需要 Helper 函数？

想象一下，你正在测试一个 Vue 组件，每次测试你都需要做以下繁琐的准备工作：

引入 mount。
引入 createRouter 和 createPinia。
配置全局插件。
包裹一层 div 标签。

如果每个测试文件都写一遍这些代码，不仅累，而且一旦项目结构变了（比如路由配置变了），你得改几十个文件。

Helper 函数就是为了解决这个问题：把这些"脏活累活"封装在一个地方。

💻 代码对比：没有 Helper vs 有 Helper

❌ 没有 Helper 函数（代码重复，难以维护）

javascript 复制代码

// UserList.test.js
import { mount, config } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'
import UserList from './UserList.vue'

// 每个测试文件都要重复写这些配置...
const router = createRouter({ history: createWebHistory(), routes: [] })
const pinia = createPinia()

it('渲染用户列表', () => {
  const wrapper = mount(UserList, {
    global: {
      plugins: [router, pinia] // 每次都要手动注入
    }
  })
  expect(wrapper.text()).toContain('用户')
})

it('点击按钮跳转', () => {
  const wrapper = mount(UserList, {
    global: {
      plugins: [router, pinia] // 又写了一遍...
    }
  })
  // ...
})

✅ 使用 Helper 函数（简洁，DRY 原则）

我们创建一个专门的 test-utils 目录，里面放一个 Helper 函数。

1. 定义 Helper 函数 (src/test-utils/index.js)

这个函数通常被称为 render 或 customMount。

javascript 复制代码

import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'

// 这是一个典型的 Helper 函数
export function render(component, options = {}) {
  // 在这里统一处理通用的配置
  const router = createRouter({
    history: createWebHistory(),
    routes: [{ path: '/', component: { template: 'div' } }]
  })
  
  const pinia = createPinia()

  // 将通用配置合并到选项中
  return mount(component, {
    global: {
      plugins: [router, pinia],
      ...options.global // 允许在测试时覆盖通用配置
    },
    ...options
  })
}

2. 在测试中使用

javascript 复制代码

// UserList.test.js
import { render } from '@/test-utils' // 引入 Helper
import UserList from './UserList.vue'

it('渲染用户列表', () => {
  // 代码瞬间清爽了！只关注"测什么"，不关注"怎么配"
  const wrapper = render(UserList)
  expect(wrapper.text()).toContain('用户')
})

it('点击按钮跳转', () => {
  // 如果某个特殊测试需要额外参数，也可以传
  const wrapper = render(UserList, { props: { showButton: true } })
  // ...
})

🛠️ 常见的 Helper 函数类型

在 Vitest/Vue 项目中，你经常会遇到以下几类 Helper：

渲染辅助 ：如上例所示，封装 mount 或 render，自动注入 Router、Pinia、i18n 等插件。

数据工厂 ：用于生成大量的模拟数据。

javascript 复制代码

// 生成 10 个模拟用户
export function createUserList(count = 10) {
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `User ${i}`,
    email: `user${i}@test.com`
  }))
}

交互辅助 ：封装复杂的用户操作。

javascript 复制代码

// 模拟复杂的拖拽操作
export async function dragAndDrop(source, target) {
  await source.trigger('mousedown')
  await target.trigger('mouseup')
}

📌 总结

Helper 函数就是测试代码里的"脚手架"。

它的作用 ：把重复的、复杂的设置逻辑（Setup）隐藏起来。
它的好处 ：让你的测试代码（AAA 模式中的 Arrange 部分）更短、更专注于业务逻辑本身。
什么时候写 ：当你发现自己在第 3 个测试文件中复制粘贴相同的配置代码时，就是时候把它提取成一个 Helper 函数了。