reactjs - 在 React 测试库中测试 react-lazyload

Question

我正在对一个使用react-lazyload延迟加载的组件进行单元测试。在我的单元测试中渲染时，我注意到Lazyload没有渲染内容并且它的占位符正在显示。我尝试使用带有 async/await 的 waitFor 来等待延迟加载的内容在下一个滴答周期中呈现，但它仍然失败并且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，上面有预期的文本。

Answer 1

测试实际上并没有触发真正的数据获取，你必须模拟它。可能请求数据的功能应该是您模拟的功能。