Jest测试Vue3组件时如何校验emit参数匹配自定义TypeScript类型

• TypeScript的type/interface是静态编译期产物，编译为JavaScript后会被完全擦除，运行时不存在对应的实体变量，在JS测试文件中导入类型自然会报Element is not accessible错误。
• typeof是JS原生运算符，运行时仅会返回'string'/'number'/'object'/'boolean'等内置基础类型字符串，永远不可能匹配自定义TS类型，原写法逻辑本身不成立。
• 额外注意：wrapper.emitted()返回的结构是{ [事件名]: 每次触发的参数数组[] }，单次emit的第一个参数需要通过wrapper.emitted().customEvent[触发次数索引][参数索引]获取，原代码直接拿整个事件数组做判断也不符合API用法。

根据需要「编译时类型提示」还是「运行时实际校验」选对应方案即可，单元测试场景优先选运行时校验方案。

方案1：仅编译时类型校验（无额外依赖，需使用TS编写测试用例） #

如果只需要在编码阶段通过TS做类型检查，不需要Jest运行时校验结构，直接给emitted方法传泛型标注类型即可，测试文件需改为.ts后缀：

// Component.spec.ts
import type { customType } from './types'
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

it('校验emit事件类型', () => {
  const wrapper = mount(Component)
  // 触发按钮点击
  wrapper.find('button').trigger('click')
  // 标注事件payload类型，TS会自动做静态校验，结构不符时编码阶段就会标红
  const events = wrapper.emitted<{ customEvent: [customType] }>()
  expect(events?.customEvent).toBeTruthy()
})

注意：该方案仅在TS编译阶段生效，若运行时实际抛出的payload结构错误，只要JS能正常执行Jest不会标记用例失败，不适合作为单测的校验逻辑。

方案2：运行时结构校验（单测推荐方案） #

单元测试是运行时执行的代码，要真正校验抛出值结构是否符合预期，必须基于运行时可访问的校验规则判断，分两种实现：

轻量场景：手动逐字段断言 #

类型结构简单时无需额外依赖，直接逐层判断字段类型即可，JS/TS测试文件都可使用：

// Component.spec.js
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

it('校验customEvent抛出值结构', () => {
  const wrapper = mount(Component)
  wrapper.find('button').trigger('click')

  // 先确认事件已触发
  expect(wrapper.emitted('customEvent')).toBeTruthy()
  // 取第一次触发的第一个参数，也就是emit的payload
  const payload = wrapper.emitted('customEvent')[0][0]

  // 逐层校验字段类型
  expect(typeof payload.foo).toBe('string')
  expect(payload.bar).not.toBeNull()
  expect(typeof payload.bar.foobar).toBe('number')
  expect(typeof payload.bar.barfoo).toBe('number')
})

复杂场景：基于Schema做统一校验 #

类型结构复杂时，手写逐字段断言维护成本高，推荐用zod这类同时支持TS类型推导和运行时校验的库，只需要维护一份Schema即可同时满足静态类型和运行时校验需求：

1. 安装依赖：npm i zod -D
2. 改造类型定义文件，用zod定义运行时Schema，同时推导TS类型：

// types.ts
import { z } from 'zod'

// 定义运行时校验规则
export const customTypeSchema = z.object({
  foo: z.string(),
  bar: z.object({
    foobar: z.number(),
    barfoo: z.number()
  })
})

// 从Schema推导出原有的TS自定义类型，无需重复编写类型定义
export type customType = z.infer<typeof customTypeSchema>

3. 测试文件中直接用Schema做运行时校验：

// Component.spec.js
import { mount } from '@vue/test-utils'
import Component from './Component.vue'
import { customTypeSchema } from './types'

it('校验customEvent抛出值结构', () => {
  const wrapper = mount(Component)
  wrapper.find('button').trigger('click')

  expect(wrapper.emitted('customEvent')).toBeTruthy()
  const payload = wrapper.emitted('customEvent')[0][0]
  // 校验失败时会返回错误信息，断言success为true即可标记用例是否通过
  const validateResult = customTypeSchema.safeParse(payload)
  expect(validateResult.success).toBe(true)
})

该方案不需要维护两份类型规则，Schema修改后TS类型自动同步，运行时能精准校验所有字段的类型、结构是否符合预期，是复杂项目的首选方案。

内容的提问来源于stack exchange，提问作者dmodliba