如何在Vue Test Utils Jest中全局存根已注册的组件？

当然有办法！不用逐个修改上百个测试用例，你可以通过Vue Test Utils的全局配置来统一存根你的全局组件，不管是用mount还是shallowMount都会自动生效。下面分步骤给你讲具体实现：

1. 创建测试全局配置文件 #

首先，在你的测试目录下创建一个全局配置文件，比如tests/setup.js（如果用Vitest的话可以叫vitest.setup.js），这个文件会在所有测试用例执行前自动加载。

2. 配置全局存根 #

根据你使用的Vue版本，在配置文件里添加对应的全局存根代码：

如果你用的是Vue 2 + Vue Test Utils v1 #

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

// 替换成你的全局组件名称，比如"GlobalHeader"
config.stubs['GlobalHeader'] = {
  template: '<div class="stubbed-global-header"></div>'
}

如果你用的是Vue 3 + Vue Test Utils v2 #

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

config.global.stubs = {
  // 键名要和你的全局组件注册名称完全一致
  GlobalHeader: {
    template: '<div class="stubbed-global-header"></div>'
  }
}

你可以根据需要给存根组件添加简单的模板、props或者插槽，比如如果组件需要接收title prop，还可以这么写：

GlobalHeader: {
  props: ['title'],
  template: '<div class="stubbed-header">{{ title }}</div>'
}

3. 让测试框架加载这个配置文件 #

最后要确保你的测试框架（Jest/Vitest）能识别这个配置文件：

• Jest：在jest.config.js里添加setupFilesAfterEnv: ['<rootDir>/tests/setup.js']
• Vitest：在vitest.config.js里添加test.setupFiles: ['<rootDir>/tests/setup.js']

额外提示 #

• 如果某个测试用例需要临时取消全局存根（比如要测试组件和全局组件的交互），可以在该测试里手动覆盖配置：

  test('测试和全局组件的交互', () => {
    const wrapper = mount(YourComponent, {
      global: {
        stubs: {
          GlobalHeader: false // 关闭全局存根，渲染真实组件
        }
      }
    })
  })
  

• 存根组件的模板尽量简单，避免影响测试的独立性和执行速度。

这样配置完成后，所有使用mount或shallowMount的测试用例都会自动存根你的全局组件，完全不用逐个修改测试文件啦！

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