如何在Cypress中Mock Vue项目的导入组件？

针对你给出的Vue组件结构，这里提供两种可靠的Mock方案：

方案1：模块级Mock（推荐用于局部导入场景） #

直接MockChildComponent.vue模块，让Parent组件导入Mock后的版本，完全隔离原组件：

import Parent from './Parent.vue'

describe('Parent Component', () => {
  it('渲染Mock的子组件', () => {
    // 定义Mock组件
    const MockChild = {
      template: '<div data-cy="mocked-child">Mocked Child</div>'
    }

    // Mock目标模块
    cy.mock('./ChildComponent.vue', () => MockChild)

    // 挂载Parent组件
    cy.mount(Parent)

    // 验证Mock组件渲染
    cy.get('[data-cy="mocked-child"]').should('contain', 'Mocked Child')
    // 验证原组件未渲染
    cy.get('[data-cy="child"]').should('not.exist')
  })
})

方案2：全局组件替换（适用于全局注册组件场景） #

如果你的子组件是全局注册的，或者需要快速替换组件，可以在挂载时通过Vue的全局配置覆盖：

import Parent from './Parent.vue'

describe('Parent Component', () => {
  it('替换子组件并渲染', () => {
    const MockChild = {
      template: '<div data-cy="mocked-child">Mocked Child</div>'
    }

    cy.mount(Parent, {
      global: {
        components: {
          ChildComponent: MockChild
        }
      }
    })

    cy.get('[data-cy="mocked-child"]').should('be.visible')
  })
})

注意：如果Parent组件是局部导入子组件（如示例中的<script setup>写法），全局替换方案可能不生效，因为Vue会优先使用局部导入的组件，此时请使用方案1。

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