如何使用Jest在事件侦听器中测试异步功能? [英] How to test an async function in an event listener with Jest?

问题描述

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

I have an event listener that runs an asynchronous function, and removes some elements from the DOM after completion:

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()
}

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

However that doesn't work because I believe in the test, setting up the event listener and clicking the button runs synchronously and doesn't wait for the async work to finish.

我尝试了这个主意，但没有好结果:

I tried this idea but no good results:

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是多余的:

This is wrong because DOM events don't involve promises and await Promise.resolve is redundant:

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

它会产生一-的延迟，仅此而已.

It creates one-tick delay and that's all.

由于fetchAndRemove是在其定义的同一模块中引用的，因此无法进行侦查，因此应链接fetch Promise以保持正确的执行顺序.

Since fetchAndRemove is referred in the same module it's defined, it cannot be spied, so fetch promise should be chained in order to maintain correct execution order.

考虑到fetch是间谍，它可以是:

Considering that fetch is a spy, it can be:

  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()

这篇关于如何使用Jest在事件侦听器中测试异步功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！