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

【问题标题】：How to intercept two axios requests in the same test using moxios如何使用moxios在同一个测试中拦截两个axios请求
【发布时间】：2019-07-11 10:27:09
【问题描述】：

我正在尝试在我的应用中测试删除按钮。当应用程序初始化时，它会向服务器发出 axios 请求以获取好处列表。单击删除按钮时，会发出另一个请求。由于某种原因，我的测试不会拦截第二个 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 拦截删除请求。代码本身可以工作，当单击按钮时，它会通过 axios 请求向服务器发送删除请求。

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

我想知道这是否是 moxios.wait 的工作方式，但我找不到任何建议我这样做的方式会有问题。

【问题讨论】：

标签： reactjs axios react-testing-library moxios

【解决方案1】：

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

【讨论】：