javascript - 如何等待执行异步函数的 jQuery 事件处理程序

Question

我最近不得不在我的代码中添加一些异步函数，这导致了我的笑话测试中的问题。

我有许多看起来像这样的 jQuery 事件处理程序：

// production code
jQuery(document).on('change', 'selector', (function () {
    // ...
    function(); // loads a hard-coded bit of JSON or loads from localStorage
    // ...
}));

// jest code for checking the side effects
/// @Note: 'selector2' below is not the same as 'selector' above, but the event handler 
/// will be called due to the event propagation
$('selector2').trigger('click');
expect($('selector2').prop('checked')).toBe(true); // checkbox should become checked
expect(JSON.parse(localStorage.getItem('key'))).toBe(true); // localStorage should change

现在看起来像这样：

// production code
$(document).on('change', 'selector', (async function () {
    // ...
    await functionButNowItsAsync(); // uses fetch() to load the JSON or loads from localStorage
    // ...
}));

// jest code for checking the side effects
/// @Note: 'selector2' below is not the same as 'selector' above, but the event handler 
/// will be called due to the event propagation
$('selector2').trigger('click');
/* The following no longer pass because the promise is not resolved */
expect($('selector2').prop('checked')).toBe(true); // checkbox should become checked
expect(JSON.parse(localStorage.getItem('key'))).toBe(true); // localStorage should change

我的研究让我想到了jest.spyOn、这篇博文和jQuery.triggerHandler。

• 我不相信第一个是合适的，因为我不是想监视命名函数，这些是匿名函数处理程序
• 第二个链接中的选项对于代码直接返回承诺的情况看起来很有用
• 第三个只有在我有一个特定选择器的事件处理程序时才有用，它只调用一个处理程序。这不是我的代码库的情况，正如前面的“选择器”和“选择器2”所证明的那样。改变这一点需要大量的工作，所以我不愿意在没有先探索所有其他选择的情况下这样做。

我的第一个问题是，我是否正确理解了异步概念，或者我是否遗漏了一些可以让我的任务更轻松的基础知识？其次，有没有办法“等待”异步事件处理程序？

标签： javascriptjestjs