我正在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()，期望它等待2000ms:
async fun(): Promise<void> {
const button = document.getElementById('button');
await button.click(); //I expect this await to sleep for 2000ms but it resolves instantly
}
据我所知，环境并没有等待事件侦听器完成。这是火和遗忘。
相反，让我们后退一步。测试是关于什么的？你想测试前端的某个更改吗？例如：如果有某种加载指示符，您可以测试DOM中加载指示符的存在，而不是测试类/代码的内部工作。
jest、reactjs和@testinglibrary/rect的一个例子可能是这样的。
// 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中等待信号的想法，而不是关于某个库。
但我可能在这里走错了路，如果是的话，请随时提供更多信息。
我认为这里的问题是你必须在这里添加等待：
constructor() {
const button = document.getElementById('button');
button.addEventListener('click', async () => await this.fetch());
}