如何用未反应代码模拟笑话中的按钮单击

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的一部分，在硒e2e测试中，您进行的这种测试不是模拟点击，而是让硒驱动器真正点击了按钮。] >