Angular ShadowDom组件的Cypress组件测试问题求助

我正在为启用了ShadowDom的Angular组件库做Cypress组件测试，现在遇到一个问题：单个组件的多测试用例执行时，Cypress无法在it语句之间销毁ShadowDom组件。

我尝试了三种测试方案，都存在问题：

1. 在beforeEach中挂载组件

   • 第一个测试通过，第二个相同测试失败（仅ShadowDom=true时出现），报错：

   TypeError
   Cannot set property message of [object DOMException] which has only a getter

   Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: TestShadowComponent

2. 在每个it块中挂载组件

   • 第二个相同测试失败（仅ShadowDom=true时出现），报错：

   NotSupportedError
   Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.

3. 在before块中仅挂载一次组件

   • 基础测试可以运行，但无法检测输出spies（找不到@clickSpy），且存在测试状态污染风险。

我的疑问：

1. 操作ShadowDom Angular组件时是否有错误？
2. 如果是Cypress的问题，有没有可行的解决办法？

解决思路 #

1. 组件操作自查 #

先确认组件配置和挂载逻辑没有冲突：

• 确保Angular组件仅通过encapsulation: ViewEncapsulation.ShadowDom启用ShadowDom，不要在组件内部手动调用attachShadow，避免和Angular的封装逻辑重复触发。
• 测试时不要复用同一个DOM元素作为组件宿主，每次测试都应生成新的宿主节点。

2. Cypress针对性解决办法 #

方案一：强制清理组件与DOM

在afterEach中手动销毁组件实例并清空DOM，避免残留ShadowDom节点：

afterEach(() => {
  // 销毁Angular组件实例
  const currentComponent = cy.state('runnable').ctx.component;
  if (currentComponent) {
    currentComponent.destroy();
  }
  // 清空测试用DOM节点
  cy.document().then(doc => {
    doc.body.innerHTML = '';
  });
});

方案二：每次测试创建新宿主元素

挂载组件时指定全新的宿主节点，避免复用已有ShadowDom的元素：

it('测试组件点击行为', () => {
  // 生成唯一宿主元素
  const host = document.createElement('div');
  host.id = `test-host-${Date.now()}`;
  document.body.appendChild(host);

  cy.mount(TestShadowComponent, {
    host: host,
    componentProperties: {
      // 组件属性配置
    }
  });

  // 测试逻辑
  cy.get('button').click();
  // 断言逻辑
});

方案三：绑定组件实例并主动销毁

挂载时保存组件实例，测试结束后手动销毁：

let componentInstance: TestShadowComponent;

beforeEach(() => {
  cy.mount(TestShadowComponent).then(({ component }) => {
    componentInstance = component;
  });
});

afterEach(() => {
  if (componentInstance) {
    componentInstance.destroy();
    componentInstance = null;
  }
});

方案四：升级依赖版本

部分ShadowDom销毁问题在Cypress新版本中已修复，建议升级到13.x及以上的稳定版，同时保证@cypress/angular插件版本与Cypress主版本匹配。

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