0

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

4

1 回答 1

0

我意识到我没有通过 done 参数来测试，所以它没有等待它被调用并提前完成测试。

于 2019-07-11T11:55:59.510 回答