React Testing Library中外部Web Component回调函数无法触发如何解决？

问题原因 #

你遇到的问题本质是Web Component的自定义事件和React合成事件、测试库原生事件触发逻辑不匹配导致的：fireEvent.click只会触发原生的click事件，而ExButton的exButtonClick是组件自行定义的自定义事件回调，不会被原生click自动触发。
另外如果该Web Component使用了Shadow DOM，原生事件触发逻辑默认无法穿透Shadow DOM边界，也会导致回调不执行。

解决方案 #

你可以按优先级选用以下几种方案：

方案1：手动触发自定义事件（最通用） #

大部分Web Component库的驼峰命名回调对应的自定义事件名为短横线分隔格式，比如exButtonClick对应事件名ex-button-click，你可以拿到组件DOM实例后手动派发该事件：

// 先定位到ExButton组件实例
const exButton = screen.getByText('Button');
// 派发自定义事件，composed属性必须设置为true才能穿透Shadow DOM
fireEvent(exButton, new CustomEvent('ex-button-click', {
  bubbles: true,
  cancelable: true,
  composed: true
}));

如果不确定自定义事件名，你可以临时在测试中打印exButton的事件监听列表，或者查阅组件库的事件说明确认名称。

方案2：直接调用暴露的回调方法 #

部分Web Component库会将绑定的回调直接挂载到DOM实例属性上，你可以直接调用：

const exButton = screen.getByText('Button');
exButton.exButtonClick();

方案3：穿透Shadow DOM触发内部原生点击 #

如果组件是在Shadow DOM内部封装了原生按钮，你可以先拿到内部原生按钮再触发点击：

const exButton = screen.getByText('Button');
const innerNativeBtn = exButton.shadowRoot.querySelector('button');
fireEvent.click(innerNativeBtn);

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