如何使用非反应代码在开玩笑中模拟按钮点击

Question

我有一些Vanilla Javascript代码片段(使用JQuery，但没有像React/Angular这样的主要前端框架(。代码如下所示

setupIconClickEvents() {
$('#someButton').on('click', (e) => {
callFunction(parameters);
e.stopPropagation();
});
}

我想模拟按钮单击以测试是否调用了该函数，我可以通过间谍轻松完成。但是，该功能永远不会在内部被击中。这是我目前的尝试

describe('setupIconClickEvents()', () => {
beforeAll(() => {
object.setupIconClickEvents();
document.body.innerHTML = `
<div>
<button id="someButton"></div>
</div>
`;
});
describe('rankIcon', () => {
it('should stop event propagation', () => {
jest.spyOn(object, 'callFunction');
$('#someButton').trigger('click');
expect(object.callFunction).toHaveBeenCalled();
});
});
});

当我单击我的按钮时，如何进入代码片段？

Answer 1

1. 你确定放置触发器调用的代码块被执行了吗(在触发行之前添加console.log('hit')跟踪它(？

2. 选择器是否有效(转储其结果 -console.log($('#someButton'));？- 鉴于您动态生成 html，混合操作顺序并尝试选择不在页面上的元素是一个常见的错误。

3. 按钮上有点击事件吗(检查浏览器检查器事件选项卡(？

Answer 2

我看到了另一个答案，你可以测试函数本身，html的一部分，在Selenium e2e测试中，你做这种测试不是模拟点击，而是让硒驱动器真正点击屁股。