如何扩展VueWrapper接口解决Vue Test Utils的findByTestId类型错误？

1. 创建类型声明文件 #

在项目src目录下新建一个类型声明文件，比如vue-test-utils-extensions.d.ts。

2. 扩展VueWrapper接口 #

在声明文件中添加以下代码，为VueWrapper补充findByTestId的类型定义：

import { VueWrapper } from '@vue/test-utils';

declare module '@vue/test-utils' {
  interface VueWrapper<T = any> {
    // 同步版本
    findByTestId(testId: string): VueWrapper<T>;
    // 异步版本（如果你的插件提供异步方法则添加）
    findByTestId(testId: string): Promise<VueWrapper<T>>;
  }
}

3. 配置TypeScript识别声明文件 #

打开tsconfig.json，确保include数组包含你的声明文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue"
  ]
}

4. 生效验证 #

重启编辑器或TypeScript语言服务，此时VueWrapper实例调用findByTestId时就不会再出现类型错误。

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