Vitest+happy-dom测试LitElement自定义事件未触发问题求助

按优先级从高到低排查以下问题，全部修复后即可正常捕获事件： #

1. 核心代码逻辑错误 #

（1）生命周期未调用父类实现 #

重写LitElement的connectedCallback生命周期时，必须第一行调用父类方法，否则Lit组件自身的初始化、渲染逻辑完全不会执行：

connectedCallback() {
  super.connectedCallback(); // 这行缺失会直接导致组件初始化异常
  this.dispatchEvent(new Event('abc-breadcrumb-connected'));
}

（2）自定义事件配置错误 #

你创建的Event默认bubbles: false、composed: false：

• 未开bubbles的事件不会向上冒泡，绑定在window上的监听无法捕获
• 未开composed的事件无法穿出Lit组件默认开启的Shadow DOM边界，会被封锁在组件内部
  Storybook环境下能捕获事件，通常是因为故事内部直接在组件实例上绑定监听、或框架做了Shadow DOM事件穿透代理，不代表事件配置符合标准。
  修正事件派发逻辑：

this.dispatchEvent(new Event('abc-breadcrumb-connected', {
  bubbles: true,
  composed: true
}));

2. 测试用例写法错误 #

（1）错误给describe加async修饰 #

describe仅用于同步收集、分组测试用例，不支持异步回调，加async会打乱用例、生命周期的注册时序，直接去掉即可，所有异步逻辑放到it块内。

（2）DOM插入与等待逻辑不可靠 #

• 直接通过document.body.innerHTML插入自定义元素，在happy-dom环境下存在兼容问题：如果插入元素时自定义元素尚未完成注册，旧版本happy-dom不会自动触发已存在元素的升级流程，connectedCallback永远不会执行
• 固定时长的setTimeout等待、happyDOM.whenAsyncComplete都不能覆盖Lit组件的异步渲染周期，无法保证生命周期执行完成
  替换为标准DOM创建方式+显式等待逻辑：

import { expect, describe, it, vi } from 'vitest';
import '../abc-breadcrumb';
import { AbcBreadcrumb } from "../abc-breadcrumb";

describe('Abc breadcrumb', () => { // 去掉async修饰
  it('Dispatches connected event', async () => {
    const mockConnectedCallback = vi.fn();
    // 提前绑定事件监听，用once避免内存泄漏
    window.addEventListener('abc-breadcrumb-connected', mockConnectedCallback, { once: true });

    // 用createElement替代innerHTML插入元素
    const breadcrumb = document.createElement('abc-breadcrumb') as AbcBreadcrumb;
    breadcrumb.setAttribute('role', 'nav');
    breadcrumb.setAttribute('aria-label', 'Breadcrumb');
    breadcrumb.className = 'breadcrumb';
    breadcrumb.setAttribute('ismobile', '');
    document.body.appendChild(breadcrumb);

    // 显式等待自定义元素注册完成
    await customElements.whenDefined('abc-breadcrumb');
    // 等待Lit组件首次渲染、生命周期执行完成
    await breadcrumb.updateComplete;
    // 轮询等待事件触发，避免时序问题
    await vi.waitFor(() => {
      expect(mockConnectedCallback).toHaveBeenCalledTimes(1);
    });
  })
});

3. 配置可选优化 #

如果以上修改后仍有异常，可以在Vitest配置中显式开启happy-dom的自定义元素支持：

export default defineConfig({
  test: {
    globals: true,
    environment: 'happy-dom',
    environmentOptions: {
      happyDOM: {
        settings: {
          enableCustomElements: true
        }
      }
    }
  },
  // 其余原有配置保持不变
})

快速定位技巧 #

如果修改后仍未捕获事件，可以先把事件监听直接绑定到创建的breadcrumb元素实例上，排除冒泡/Shadow DOM穿透的干扰，快速判断是事件未派发，还是派发后没有传递到目标监听节点。

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