Vue Testing Library如何Mock Vue组件？不用mount/shallowMount

针对你的需求——测试ComponentA时保留ComponentB的真实渲染，同时将ComponentC替换为简单占位元素，Vue Testing Library结合Jest可以实现和React Testing Library类似的效果，无需依赖Vue Test Utils的mount/shallowMount存根功能。

方法1：用jest.mock直接Mock组件模块（推荐，对应你偏好的React写法） #

和React中jest.mock的思路完全一致，直接替换ComponentC的模块导出，返回一个自定义的Vue组件：

// 测试文件中
import { render, fireEvent } from '@testing-library/vue'
import ComponentA from '@/components/ComponentA.vue'

// Mock ComponentC，路径要和ComponentA中导入ComponentC的路径完全一致
jest.mock('@/components/ComponentC.vue', () => ({
  // 可选：指定组件名，便于调试时识别
  name: 'ComponentC',
  // 渲染带测试标识的简单div
  template: '<div data-testid="mocked-component-c"></div>'
}))

test('ComponentA与ComponentB交互正常，ComponentC被Mock', () => {
  const { getByTestId, getByRole, getByText } = render(ComponentA)
  
  // 验证ComponentC已被替换为Mock元素
  expect(getByTestId('mocked-component-c')).toBeInTheDocument()
  // 验证ComponentB的交互逻辑（示例）
  fireEvent.click(getByRole('button', { name: 'ComponentB按钮' }))
  expect(getByText('交互成功提示')).toBeInTheDocument()
})

方法2：用jest.spyOnMock组件导出（对应你第一种React写法） #

如果ComponentC是通过命名导出的形式提供（比如非单文件组件的导出），可以用jest.spyOn替换其实现：

import * as ComponentCModule from '@/components/ComponentC.vue'
import { render } from '@testing-library/vue'
import ComponentA from '@/components/ComponentA.vue'

test('用spyOn Mock ComponentC', () => {
  // 替换ComponentC的默认导出
  jest.spyOn(ComponentCModule, 'default').mockImplementation(() => ({
    name: 'ComponentC',
    template: '<div data-testid="mocked-component-c"></div>'
  }))

  const { getByTestId } = render(ComponentA)
  expect(getByTestId('mocked-component-c')).toBeInTheDocument()
})

关键注意事项 #

1. 路径严格匹配：Mock时的文件路径必须和ComponentA中导入ComponentC的路径完全一致（包括相对路径、别名路径），否则Mock不会生效。
2. Vue3