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

Question

我正在 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
}

Answer 1

我认为这里的问题是你必须在这里添加 await:

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

Answer 2

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

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

关于 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，但在它的核心中，这个 post 是关于在 DOM 中等待信号的想法，而不是关于某个库。

但我可能走错了路，如果有的话，请随时提供更多信息。

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

How to await button's listeners to resolve in javascript?

javascript

typescript

jestjs