如何解决Cypress与AlpineJS x-teleport的悬停快照兼容问题？

问题场景 #

技术栈包含Django、django-component、HTMX、AlpineJS，使用Cypress进行端到端测试。页面中使用AlpineJS的x-teleport指令传送元素，示例代码如下：

<body>
  Main page

  <div id="parent" x-data="{ openMenu: false }">
    Some content

    <template x-teleport="body">
       <div id="teleported-div" x-show="openMenu">content</div>
    </template>

    <button @click="openMenu = !openMenu">Toggle</button>
  </div>
</body>

正常使用时功能正常，x-teleport元素能正确关联原作用域的openMenu变量。但在Cypress交互式测试中，测试运行无异常且成功完成，测试结束后悬停Cypress事件列表查看快照时，会触发数百次重复的AlpineJS错误：

alpinejs-3_14_9.min.js:1 Alpine Expression Error: openMenu is not defined
Expression: "openMenu"

最终导致浏览器冻结。

解决方案 #

1. 测试后主动清理AlpineJS实例与传送元素 #

在Cypress的afterEach钩子中，手动销毁AlpineJS组件实例并移除所有被传送的元素，避免快照时残留的DOM引用无效的作用域变量：

afterEach(() => {
  // 销毁所有带x-data的组件实例
  document.querySelectorAll('[x-data]').forEach(el => {
    window.Alpine.destroy(el);
  });
  // 移除所有x-teleport模板及传送后的元素
  document.querySelectorAll('template[x-teleport], #teleported-div').forEach(el => {
    el.remove();
  });
});

2. 为x-teleport指定专用目标容器 #

避免直接传送到body，创建一个独立的容器存放传送元素，测试结束后清空该容器即可：

修改后的HTML：

<body>
  <!-- 新增专用传送目标容器 -->
  <div id="teleport-container"></div>
  
  Main page

  <div id="parent" x-data="{ openMenu: false }">
    Some content

    <template x-teleport="#teleport-container">
       <div id="teleported-div" x-show="openMenu">content</div>
    </template>

    <button @click="openMenu = !openMenu">Toggle</button>
  </div>
</body>

测试清理代码：

afterEach(() => {
  // 清空传送容器
  document.getElementById('teleport-container').innerHTML = '';
  // 销毁原作用域实例
  window.Alpine.destroy(document.getElementById('parent'));
});

3. 禁用Cypress快照功能（临时方案） #

如果不需要通过快照调试测试，可以在特定测试用例或整个测试套件中禁用快照功能，从根源避免触发错误：

describe('测试套件', () => {
  // 整个套件禁用快照
  this.snapshot = false;

  it('测试交互操作', () => {
    // 测试步骤
    cy.get('button').click();
    cy.get('#teleported-div').should('be.visible');
  });
});

// 或单个用例禁用
it('单个测试用例', { snapshot: false }, () => {
  // 测试步骤
});

问题原因 #

Cypress的快照功能会在测试结束后保留DOM状态，但AlpineJS的x-teleport元素虽然被移动到目标位置，其表达式依然依赖原x-data作用域。当测试清理阶段原x-data元素被移除后，快照悬停时Cypress会重新渲染DOM，此时传送元素无法找到原作用域的openMenu变量，进而触发循环报错。

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