如何在最新Cypress版本中创建自定义Mount函数？

问题原因 #

你提到的@cypress/mount-utils旧示例确实已过时，新版Cypress（10+）的测试根容器结构发生了变化，原示例中的ROOT_SELECTOR（比如#__cy_root）不再是正确的挂载目标，导致无法匹配到元素。

新版Cypress自定义Web组件Mount函数实现 #

以下是适配最新Cypress版本的可行方案：

1. 确认依赖安装
   确保已安装必要包：

npm install @cypress/mount-utils --save-dev

2. 编写自定义Mount函数
   在cypress/support/component.js（或你的自定义支持文件）中添加：

import { mount as mountUtils } from '@cypress/mount-utils'

export function mount(webComponentTag, options = {}) {
  // 获取Cypress当前测试的根容器
  const root = cy.state('document').body

  // 创建组件实例
  const component = document.createElement(webComponentTag)
  
  // 传递组件属性
  if (options.props) {
    Object.entries(options.props).forEach(([key, value]) => {
      component[key] = value
    })
  }

  // 插入组件内部HTML内容
  if (options.html) {
    component.innerHTML = options.html
  }

  // 将组件挂载到测试根容器
  root.appendChild(component)

  // 返回组件实例供断言使用
  return cy.wrap(component).as('component')
}

3. 在测试中使用自定义Mount
   在组件测试文件中调用：

import { mount } from '../support/component'

describe('自定义Web组件测试', () => {
  it('渲染并验证组件属性与内容', () => {
    mount('my-custom-card', {
      props: {
        title: '测试卡片',
        count: 5
      },
      html: '<span>卡片内部文本</span>'
    })

    cy.get('@component').should('have.property', 'count', 5)
    cy.get('my-custom-card').contains('测试卡片')
  })
})

关键调整说明 #

• 不再依赖硬编码的ROOT_SELECTOR，改用cy.state('document').body直接获取测试根容器，适配新版Cypress的DOM结构
• 简化挂载逻辑，直接操作DOM完成组件添加，规避旧工具类的兼容性问题
• 支持传递组件属性和内部HTML，覆盖Web组件常见使用场景

替代方案：使用官方组件测试支持 #

如果你的项目基于Lit等现代Web组件库，可直接使用Cypress官方提供的组件测试挂载方法，无需自定义：

import { mount } from 'cypress/lit'

it('测试Lit组件', () => {
  mount(MyLitComponent, {
    props: {
      message: 'Hello Web Component'
    }
  })
})

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