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

Question

我有一个事件侦听器，它运行一个异步函数，并在完成后从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()
}

Answer 1

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

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

它只会产生一秒的延迟，仅此而已。

因为fetchAndRemove是在定义它的同一模块中引用的，所以它不能被窥探，所以fetch promise应该链接起来，以保持正确的执行顺序。

考虑到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()