如何使用 Jest 测试事件监听器中的异步函数？

我有一个运行异步函数的事件监听器，并在完成后从 DOM 中删除一些元素：

async function fetchAndRemove() {
  try {
    const response = await fetch('/endpoint-that-returns-json')

    const result = await response.json()
    if (result.status === 'Success') {
      document.querySelector('.my-element').remove()
    }
  } catch (error) {
    console.log(error)
  }
}

function setupListeners () {
  const button = document.querySelector('.my-button')
  button.addEventListener('click', () => {
    fetchAndRemove()
  })
}


setupListeners()

在我的测试中，我有：

import fetch from 'jest-fetch-mock';

test('it removes the element after clicking', () => {
  fetch.mockResponse(JSON.stringify({ status: 'Success' }))
  setupListeners()
  document.querySelector('.my-button').click() // .click comes from JSDOM

  expect(document.querySelector('.my-element')).toBeNull()
}

然而，这不起作用，因为我相信测试，设置事件侦听器并单击按钮同步运行，并且不等待异步工作完成。

我尝试了这个想法但没有好的结果：

test('it removes the element after clicking', async () => {
  fetch.mockResponse(JSON.stringify({ status: 'Success' }))
  setupListeners()
  await Promise.resolve(document.querySelector('.my-button').click())

  expect(document.querySelector('.my-element')).toBeNull()
}

这是错误的，因为 DOM 事件不涉及承诺并且await Promise.resolve是多余的：

await Promise.resolve(document.querySelector('.my-button').click())

它会产生一滴延迟，仅此而已。

Since fetchAndRemove在它定义的同一模块中被引用，它不能被监视，所以fetchPromise 应该被链接起来以保持正确的执行顺序。

考虑到fetch是一个间谍，它可以是：

  fetch.mockResponse(JSON.stringify({ status: 'Success' }))
  setupListeners()
  document.querySelector('.my-button').click()
  await fetch.mock.results[0].value; // delay for fetch()
  await null; // another delay for res.json()
  expect(fetch).toBeCalledWith('/endpoint-that-returns-json')
  expect(document.querySelector('.my-element')).toBeNull()