我正在使用環境在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
}
uj5u.com熱心網友回復：
我認為這里的問題是你必須在這里添加等待：
constructor() {
const button = document.getElementById('button');
button.addEventListener('click', async () => await this.fetch());
}
uj5u.com熱心網友回復：
據我所知，環境不會等待您的事件偵聽器完成。它的火和忘記。
相反，讓我們退后一步。考試是關于什么的？你想測驗前端的某個變化嗎？例如：如果有某種加載指示器，您可以測驗 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 中等待信號的想法，而不是關于某個庫。
但我可能在這里走錯了路，如果是這樣，請隨時提供更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388615.html
標籤：javascript 打字稿 玩笑