如何在运行以后的部分测试之前使用艾灸进行反应测试来更新DOM

Question

我正在尝试使用jest编写一个测试，并为一个组件编写一个反应测试库。测试需要等待useEffect在axios请求之后更新状态。我使用艾灸来模拟api调用，但我无法让测试等待艾莫斯返回，然后它会触发一个click事件处理程序，该处理程序再次向api发送一个删除请求。测试失败，说明我试图单击的DOM元素还不存在，因为它只生成一次useEffect请求更新。

我尝试使用flushEffect等待，我也尝试将点击包装在最初的艾滋请求中，但两者都不起作用。

我已经删掉了任何与此无关的代码。

这是组件。一旦加载，它就会向api发送一个get请求，以获取具有某些好处的json响应。BenefitsTable组件获得了好处，并为每个组件生成一个表，其中包括一个delete按钮。我试图首先加载好处，然后单击删除按钮。在加载之前，不存在删除按钮。

const Benefits = props => {
  const [benefits, setBenefits] = useState([])
  const [editing, setEditing] = useState(false)
  const [editingBenefit, setEditingBenefit] = useState({id: null, name: '', category: ''})

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

  return(
     <div>
       <Section>
         <BenefitsTable
            benefits={benefits} 
            deleteBenefit={deleteBenefit}
            editBenefit={editBenefit}
          />
       </Section>
     </div>
  )
}

我的测试如下：

it('deletes a benefit when the delete button is clicked', () => {
  const { getByTestId } = render(<Benefits />)
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
        status: 200,
        response: benefits
      }).then(() => {
        done()
      })
    })
    fireEvent.click(getByTestId('deleteButton1'))
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
       status: 200,
    }).then(() => {
      expect(document.querySelectorAll('tbody > tr').length).toBe(1)
      done()
    })
  })
})

输出是Unable to find an element by: [data-testid="deleteButton1"]，这是因为axios请求是异步的，但是我已经尝试过在第一个axios请求的然后子句中包装这个火事件和随后的axios请求，虽然测试通过了，但是它传递的值意味着它没有被正确地处理。

Answer 1

会等待元素出现吗？

it('deletes a benefit when the delete button is clicked', async () => {
  const { getByTestId } = render(<Benefits />)
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
        status: 200,
        response: benefits
      })
    })
    await waitForElement(getByTestId('deleteButton1'))
    fireEvent.click(getByTestId('deleteButton1'))
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
       status: 200,
    }).then(() => {
      expect(document.querySelectorAll('tbody > tr').length).toBe(1)
      done()
    })
  })
})