如何使用moxios在同一测试中拦截两个axios请求

Question

我正在尝试在我的应用程序中测试删除按钮。当应用程序初始化时，它会向服务器发出一个axios请求，以获取好处列表。当单击delete按钮时，会发出另一个请求。由于某些原因，我的测试就是不能拦截第二个axios请求。

我尝试将初始请求存根，但仍然遇到同样的问题。

初始请求是

  useEffect(() => {
    axios.get('/api/v1/benefits')
      .then(response => {
        setBenefits(response.data)
      })
  }, [])

单击按钮时调用的函数为

  const deleteBenefit = benefit => {
    const id = benefit.id
    axios.delete(`/api/v1/benefits/${id}`)
      .then(response => {
        setBenefits(benefits.filter(benefit => benefit.id !== id))
        warning('Benefit Deleted')
      })
      .catch(error => {
        warning('Benefit could not be deleted. Please try again')
      })
}

这个测试写成

it('deletes the selected benefit', async () => {
    const { getByTestId, debug } = render(<Benefits />)
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
        status: 200,
        response: benefits
      })
    })
    const deleteButton = await waitForElement(() => getByTestId('deleteButton1'))
    fireEvent.click(deleteButton)
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
        status: 204,
      }).then(() => {
        expect(document.querySelectorAll('tbody > tr').length).toBe(3)
        done()
      })
    })
})

我希望第二个moxios.wait能够拦截delete请求。代码本身是有效的，当单击按钮时，它会通过axios请求向服务器发送delete请求。

我还确认了测试本身确实调用了该函数，因为为了测试它，我创建了一个虚拟元素并更新了它，这将更新测试。

我想知道这是不是moxios.wait的工作方式，但我找不到任何东西表明我的工作方式将是一个问题。

Answer 1

我意识到我没有将done参数传递给test，所以它没有等待它被调用并提前完成测试。