如何在Jest单元测试中修复<nuxt-link>未知自定义元素警告错误

嘿，这个问题我之前测Nuxt组件的时候也遇到过，很典型：nuxt-link是Nuxt自带的专属组件，但@vue/test-utils的测试环境是独立于Nuxt运行时的，不会自动帮你注册这个全局组件，所以就抛出了未识别组件的警告。

给你两个简单可行的解决办法，随便选一个都能搞定：

方法1：给shallowMount添加组件Stub #

这是最推荐的方案，因为我们测试SidebarCMS组件时，根本不需要nuxt-link的实际路由功能，只要它能被正常占位渲染就行。修改你测试代码里的factory函数：

const factory = () => {
  return shallowMount(SidebarCMS, {
    stubs: {
      // 告诉测试工具识别这个组件，用默认Stub占位
      'nuxt-link': true
    }
  });
};

如果你想让Stub更贴近真实的DOM结构（比如渲染成<a>标签），可以自定义Stub模板：

stubs: {
  'nuxt-link': {
    template: '<a><slot /></a>'
  }
}

方法2：全局注册nuxt-link（适合多测试场景） #

如果你的项目里很多测试都要用到nuxt-link，可以在测试文件开头全局注册它，省得每个测试都写Stub：

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

// 全局注册nuxt-link的Stub组件
config.global.components['nuxt-link'] = {
  template: '<a><slot /></a>'
};

改完代码后再跑npm run test，那个烦人的警告应该就消失了，快照测试也能正常执行啦。

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