如何使用 Non-React 代码模拟 Jest 中的按钮点击

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

您确定触发调用所在的代码块完全执行了吗（跟踪它添加 console.log('hit'); 在触发行之前）？
select 是否工作（转储其结果 - console.log($('#someButton'));？- 鉴于您动态生成 html，混合操作顺序并尝试 select 不在页面上的元素。
按钮上是否有点击事件（检查浏览器检查器事件选项卡）？

Answer 2

我看到了另一个答案，你可以只测试函数本身，来自 html 的一部分，在 selenium e2e 测试中，你进行这种测试不是模拟点击而是制作 selenium 驱动器真的点击按钮。

如何使用 Non-React 代码模拟 Jest 中的按钮点击

How to simulate button click in Jest with Non-React Code

javascript

jestjs

jsdom