Vue3+TS单元测试中$emit类型不兼容问题求助

问题场景 #

在TypeScript+组合式API的Vue3项目里，用Vitest搭配@vue/test-utils编写单元测试时，将shallowMount的返回值赋值给VueWrapper类型变量会触发类型检查错误：

const wrapper: VueWrapper = shallowMount(ResultsHistory, {
  // 挂载选项...
});

错误详情：

Types of property '$emit' are incompatible.
  Type '((event: "myEvent", arg0: number) => void) & ((event: "anotherEvent", arg0: number) => void)' is not assignable to type '(event: string, ...args: any[]) => void'.
    Types of parameters 'event' and 'event' are incompatible.
      Type 'string' is not assignable to type '"myEvent"'.ts(2322)

组件已按照Vue官方规范定义事件类型：

const emit = defineEmits<{
  (e: 'myEvent', id: number): void
  (e: 'anotherEvent', value: string): void
}>()

项目依赖版本如下：

"dependencies": {
    "vue": "^3.2.41",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
    "@rushstack/eslint-patch": "^1.2.0",
    "@types/jsdom": "^16.2.15",
    "@types/node": "^16.18.3",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.2.1",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.27.0",
    "eslint-plugin-vue": "^9.7.0",
    "jsdom": "^19.0.0",
    "prettier": "^2.7.1",
    "sass": "^1.56.0",
    "typescript": "~4.6.3",
    "vite": "^3.2.3",
    "vitest": "^0.24.5",
    "vue-tsc": "^1.0.9"
  }

解决方案 #

方法1：让TypeScript自动推导wrapper类型 #

直接移除手动指定的VueWrapper类型，让TypeScript自动推断shallowMount返回的具体类型：

const wrapper = shallowMount(ResultsHistory, {
  // 挂载选项...
});

这种方式不仅能解决类型冲突，还能让wrapper获得组件专属的精准类型提示，是最推荐的方案。

方法2：给VueWrapper传入组件的事件泛型参数 #

如果必须手动指定类型，需要为VueWrapper传入组件的事件类型：

1. 在组件文件中导出事件类型：

// ResultsHistory.vue
export type ComponentEmits = {
  (e: 'myEvent', id: number): void
  (e: 'anotherEvent', value: string): void
}

const emit = defineEmits<ComponentEmits>()

2. 在测试文件中引入并使用：

import type { ComponentEmits } from '@/components/ResultsHistory.vue'
import type { VueWrapper } from '@vue/test-utils'

// 若无Props类型，第一个泛型参数传unknown即可
const wrapper: VueWrapper<unknown, ComponentEmits> = shallowMount(ResultsHistory, {
  // 挂载选项...
});

方法3：升级@vue/test-utils版本 #

当前使用的@vue/test-utils 2.2.1对组合式API的类型支持存在局限性，后续版本（如>=2.3.0）修复了相关类型兼容问题。可以执行以下命令升级依赖：

npm update @vue/test-utils
# 或使用yarn
yarn upgrade @vue/test-utils

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