Тестирование реактивно-загружаемых компонентов

Question

У меня проблемы с тестированием моего React компоненты, которые используют react-loadable, Скажи, у меня есть Button компонент, который в зависимости от того, получает ли он icon опора, загружает Icon компонент вроде так:

Button.js

const LoadableIcon =  Loadable({
  loader: () => import('./Icon'),
  loading: () => <div>Loading...</div>
})

function Button(props) {
  return (
    <button 
      onClick={props.onClick}>
      {props.icon &&
        <LoadableIcon name={props.icon} />}
      {props.children}
    </button>
  )
}

Когда я тестирую этот компонент, Icon еще не загружен, и вместо этого тест находит только <div>Loading...</div> элемент...

Button.test.js

import React from 'react'
import {render} from 'react-testing-library'

import Button from '../Button'


describe('Button', () => {
  it('renders icon correctly', () => {
    const {getByText} = render(
      <Button 
        icon='add' 
      />
    )
    expect(getByText('add')).toBeInTheDocument()
  })
}) 

Есть ли элегантный способ справиться с этой ситуацией без использования фактического setTimeouts?

Answer 1

Итак, ответ таков: прочитайте документы - обратите внимание на себя! Решение, основанное на документах, было следующим:

describe('Button', () => {
  it('renders icon correctly', async () => {
    const {getByText} = render(
      <Button 
        icon='add' 
      />
    )
    const icon = await waitForElement(() => getByText('add'))
    expect(icon).toBeInTheDocument()
  })
})

Также обратите внимание, что async должен использоваться вместе с await,

Answer 2

У меня нет личного опыта использования реагирующей загрузки, но я реализовал аналогичный компонент, который обрабатывает разбиение кода с помощью динамического import() синтаксис.

Чтобы заставить Jest работать с "загружаемыми" / "асинхронными" компонентами, мне пришлось настроить .babel-rc config для Jest для включения плагина babel динамического узла импорта таким образом, что модули могут быть правильно разрешены, даже если импорт асинхронный.