React
を使用するコンポーネントのテストに問題がありますreact-loadable
。たとえば、小道具Button
を受け取るかどうかに応じて、次のようにコンポーネントをロードするコンポーネントがあるとします。icon
Icon
ボタン.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
ますか?