我之前在Vue项目里用Jest做快照测试时也碰到过一模一样的问题！按照官方文档的方法Stub了router-link但快照还是不通过，后来排查出几个常见的坑，分享给你：

1. 确认Stub的写法是否适配你的Vue版本 #

不同Vue版本的Vue Test Utils API有差异，这是最容易踩的坑：

• Vue 2 + Vue Test Utils v1：直接在mount/shallowMount的选项里传入stubs

  import { shallowMount } from '@vue/test-utils'
  import YourComponent from '@/components/YourComponent.vue'
  
  describe('YourComponent', () => {
    it('matches snapshot', () => {
      const wrapper = shallowMount(YourComponent, {
        stubs: {
          'router-link': true // 或自定义Stub组件
        }
      })
      expect(wrapper.html()).toMatchSnapshot()
    })
  })
  

• Vue 3 + Vue Test Utils v2：必须把stubs放在global选项下

  const wrapper = shallowMount(YourComponent, {
    global: {
      stubs: {
        'router-link': true
      }
    }
  })
  

2. 自定义Stub组件替代默认Stub #

默认的true Stub可能会渲染成空标签，导致快照结构和实际渲染差异过大。可以自定义一个更贴合原组件结构的Stub：

// 模拟router-link的基础结构
const RouterLinkStub = {
  props: ['to'],
  template: '<a class="router-link" :href="to"><slot /></a>'
}

// 在测试中使用
const wrapper = shallowMount(YourComponent, {
  // Vue 3写法，Vue 2去掉global层即可
  global: {
    stubs: {
      'router-link': RouterLinkStub
    }
  }
})

3. 检查是否全局注册了Vue Router导致Stub失效 #

如果你的测试文件或全局测试配置里不小心注册了Vue Router，局部Stub会被全局Router覆盖。要确保测试环境是隔离的：

• 避免在测试文件里写Vue.use(VueRouter)（Vue 2）或app.use(createRouter(...))（Vue 3）
• 若有全局Router配置，可在测试前重置Vue实例环境

4. 别忘了更新旧快照 #

如果之前的快照已经记录了未Stub的router-link内容，即使现在Stub正确了，旧快照也会不匹配。运行以下命令更新快照：

jest --updateSnapshot

我当时是因为Vue 3里没把stubs放在global选项里，导致Stub完全没生效，调整后快照就正常通过了，你可以从这几个方向逐一排查~

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