在 React 测试库中测试 react-lazyload答案

【问题标题】：Testing react-lazyload in React testing library在 React 测试库中测试 react-lazyload
【发布时间】：2021-11-09 08:16:55
【问题描述】：

我正在对一个组件进行单元测试，该组件利用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，上面有预期的文本。

【问题讨论】：

标签： reactjs jestjs react-testing-library react-lazy-load

【解决方案1】：

测试实际上不会触发真正的数据获取，您必须模拟它。可能请求数据的函数应该是你模拟的那个。

【讨论】：

没有数据获取，lazyload 包裹的内容没有加载。添加有问题的代码。
好的，我现在看到更新的问题。我查看了这个包的规格，如果提供了占位符，它似乎是呈现占位符而不是内容的预期行为。请看这个页面github.com/twobin/react-lazyload/blob/master/test/specs/…
感谢分享，但是如何测试源代码中提供的占位符的实际内容。我期待它在下一个滴答周期中用子内容替换占位符，因此使用 await ，但它不是那样工作的。
如果不是 3rd 方库 :] 这是可能的，因为这是 3rd 方库的一个缺点，它们不能扩展，或者在这种情况下不能在测试中覆盖。我的建议，有点老套，将某种标志传递给子组件。它将确定占位符是 undefined（然后您可以测试内容）还是 "Loading..." 文本。