IntelliJ中Jest测试Vue时vm属性与方法未解析的警告怎么解决

以下几种方案可按需选择：

• 类型标注补全（最推荐，不影响检查还能获得类型提示） #

  如果是JS项目，通过JSDoc给vm实例补全类型：

  // 拿到wrapper后给vm加类型标注
  const wrapper = mount(YourComponent)
  /** @type {import('vue').default & { test: boolean, setTestToTrue: () => void }} */
  const vm = wrapper.vm
  // 后续访问vm.test、vm.setTestToTrue都不会触发警告
  

  如果是TS项目，给mount方法指定组件泛型即可自动识别所有属性方法：

  import YourComponent from './YourComponent.vue'
  const wrapper = mount<typeof YourComponent>(YourComponent)
  const vm = wrapper.vm
  

• 调整IDE检查规则 #

  打开IntelliJ设置，依次进入Editor > Inspections > JavaScript > General > Unresolved JavaScript variable，可以选择：
  1. 将测试文件所在目录添加到该检查的排除作用域
  2. 单独对测试文件关闭未解析变量检查

• 适配IDE识别的访问方式 #

  可以通过Vue实例内置属性访问，IDE对这类内置属性的识别度更高：
  • 访问data属性：使用wrapper.vm.$data.test代替wrapper.vm.test
  • 调用方法：可以通过wrapper.vm.$options.methods.setTestToTrue.call(wrapper.vm)调用

• 检查IDE插件配置 #

  确保已经安装IntelliJ官方的Vue.js插件，且插件版本和你项目使用的Vue大版本（Vue2/Vue3）匹配，过时的插件也会导致自定义属性识别失败。

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