Как получить тест реакции с помощью moxios для обновления DOM перед запуском более поздней части теста - PullRequest
Новая
       35

Как получить тест реакции с помощью moxios для обновления DOM перед запуском более поздней части теста

0 голосов
/ 05 июля 2019

Я пытаюсь написать тест, используя jest и реагировать на тестирование библиотеки для компонента. Тест должен ждать, пока useEffect обновит состояние после запроса axios. Я использую moxios, чтобы смоделировать вызов API, но я не могу заставить тест ждать, пока moxios вернется, прежде чем он запустит обработчик события click, который снова отправляет запрос на удаление в API. Тест не пройден, сказав, что элемент DOM, на который я пытаюсь щелкнуть, еще не существует, поскольку он создается только после обновления запроса useEffect.

Я пытался использовать flushEffect для ожидания, а также пытался обернуть клик внутри исходного запроса moxios, но оба не работают

Я вырезал любой код, который не имеет отношения.

Это компонент. После загрузки он отправляет запрос get в API для получения ответа json о некоторых преимуществах. Компонент BenefitsTable использует преимущества, и для каждого из них создается таблица с кнопкой удаления. Я пытаюсь сначала загрузить преимущества, а затем нажать кнопку удаления. Кнопка удаления не существует до их загрузки. 

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 является асинхронным, но я попытался обернуть запрос fireevent и последующий запрос axios в предложение then первого запроса axios, и хотя тест проходит успешно, он проходит с любым значением, означающим, что оно не обрабатывается правильно.

1 Ответ

0 голосов
/ 05 июля 2019

Будет ли ждать, пока элемент будет работать? 

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()
    })
  })
})
...