为何@testing-library/angular的fireEvent.click()对ion-button无效但普通button正常？

核心原因 #

1. Ionic组件的封装机制：ion-button是Ionic封装的自定义组件，内部通过Shadow DOM包含原生<button>元素。fireEvent.click()直接作用在ion-button外层元素上时，无法穿透到内部的原生按钮节点，导致点击事件未被组件正确响应。
2. fireEvent的事件模拟不完整：fireEvent仅触发单一的click事件，而Ionic组件的交互逻辑依赖真实用户点击的完整事件序列（如mousedown、mouseup、click），单一事件无法触发组件的响应逻辑。

解决方案 #

1. 使用@testing-library/user-event模拟真实点击 #

user-event会模拟贴近真实用户的完整交互流程，能正确触发Ionic组件的点击逻辑。修改测试代码如下：

首先导入userEvent：

import userEvent from '@testing-library/user-event';

然后将测试中的fireEvent.click替换为异步的userEvent.click：

// 替换原fireEvent.click行
await userEvent.click(screen.getByTestId('button-submit'));
expect(submitAction).toHaveBeenCalledWith(loginData);

2. 确保mock函数正确初始化 #

确认submitAction是通过测试框架（如Jest）创建的mock函数，否则无法正确验证调用：

const submitAction = jest.fn(); // 需添加这行代码

3. 备选方案：直接触发内部原生按钮（不推荐） #

若上述方法无效，可直接定位ion-button内部的原生按钮元素触发点击，但该方法依赖Ionic内部DOM结构，版本更新后可能失效：

const ionButton = screen.getByTestId('button-submit');
const nativeBtn = ionButton.shadowRoot?.querySelector('button');
if (nativeBtn) {
  fireEvent.click(nativeBtn);
}

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