Question

我正在尝试在我的应用中测试删除按钮。当应用程序初始化时，它将向服务器发出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的工作方式，但是我找不到任何建议来说明我的工作方式。

Answer 1

我意识到我没有将完成的参数传递给测试，因此它没有等待它被调用并尽早完成测试。

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

1 个答案: