我正在对一个组件进行单元测试,该组件使用react-lazyload
来延迟加载内容。在我的单元测试中呈现时,我注意到Lazyload
没有呈现内容,并且显示了它的占位符。我尝试使用waitFor和async/await来等待延迟加载的内容在下一个tick周期中呈现,但它仍然失败,并且screen.debug()
仍然在dom中显示占位符。
有什么方法可以测试这样的组件吗?下面是我尝试的方法:
render(<WrapperComponent />)
await waitFor(() => {
expect(screen.getByText('Lazily loaded text!')).toBeInTheDocument()
});
// source code
import LazyLoad from 'react-lazyload';
const WrapperComponent = () => {
return (
<div>
<LazyLoad placeholder="Loading..." >
<div>Lazily loaded text!</div>
</LazyLoad>
</div>
);
}
延迟加载的内容包含一个div,上面应该有文本。
3条答案
按热度按时间ckocjqey1#
我们可以在测试文件的顶部模拟react-lazyload库中的
LazyLoad
组件,这样LazyLoad
组件就像我们需要测试的实际组件的 Package 器一样。qmb5sa222#
测试实际上并不触发真实的的数据获取,您必须模拟它。可能请求数据的函数应该是您模拟的那个函数。
u4vypkhs3#
您可以使用forceVisible: