如何等待按钮的侦听器在 javascript 中解析？

Posted 2023-03-13

【中文标题】如何等待按钮的侦听器在 javascript 中解析？

【英文标题】：How to await button's listeners to resolve in javascript?

【发布时间】：2022-01-22 20:55:48

【问题描述】：

我正在 Jest 中使用 jsdom 环境进行前端测试，这让我可以模拟 DOM 树并手动调用 button.click() 之类的东西。

我想要实现的是await button.click()，我认为应该等待所有按钮的听众解决他们的承诺，但不幸的是它不是那样工作的。

我们以这段代码为例：

class Test 
    constructor() 
        const button = document.getElementById('button');
        button.addEventListener('click', async () => this.fetch());
    

    async fetch(): Promise<void> 
        await this.sleep();
    

    sleep() 
        return new Promise(resolve => setTimeout(resolve, 2000))
    

现在假设我有一些异步 Jest 测试，我手动调用 button.click() 期望它等待 2000 毫秒：

async fun(): Promise<void> 
    const button = document.getElementById('button');
    
    await button.click(); //I expect this await to sleep for 2000ms but it resolves instantly

【参考方案1】：

我认为这里的问题是您必须在此处添加等待：

  constructor() 
        const button = document.getElementById('button');
        button.addEventListener('click', async () => await this.fetch());
    

【讨论】：

不幸的是，这也失败了。 VSCode 告诉我这个 await 是多余的，我可以删除它。

【参考方案2】：

据我所知，环境不会等待您的事件侦听器完成。火了就忘了。

相反，让我们退后一步。测试是关于什么的？你想测试前端的某个变化吗？例如：如果有某种加载指示器，您可以测试 DOM 中是否存在加载指示器，而不是测试类/代码的内部工作。

使用 jest、reactjs 和 @testing-library/react 的示例可能如下所示。

// render the DOM
const  getByRole, getByText  = render(
    <App />
)

const button = getByRole("button",  name: "Submit" )

// click the button
button.click()

// wait till the text appears within the DOM
await waitFor(() => 
    getByText("Successfully submitted!")
)

waitFor 是这里的关键函数。如果提供的回调成功，它会间隔检查。只有当 waitFor 完成时，测试才会继续。

请不要说这个例子使用了 reactjs，但是这篇文章的核心是关于在 DOM 中等待信号的想法，而不是关于某个库。

但是我可能在这里走错了路，如果是这样，请随时提供更多信息。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。