6

Reactを使用するコンポーネントのテストに問題がありますreact-loadable。たとえば、小道具Buttonを受け取るかどうかに応じて、次のようにコンポーネントをロードするコンポーネントがあるとします。iconIcon

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

実際の s を使用せずにこの状況を処理するエレガントな方法はありsetTimeoutますか?

4

2 に答える 2