Jest.js 在React测试库中测试react-lazyload

yeotifhr 于 2022-12-08 发布在 Jest

关注(0)|答案(3)|浏览(202)

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

jestjs

来源：https://stackoverflow.com/questions/69172825/testing-react-lazyload-in-react-testing-library

3条答案

按热度按时间

ckocjqey1#

我们可以在测试文件的顶部模拟react-lazyload库中的LazyLoad组件，这样LazyLoad组件就像我们需要测试的实际组件的 Package 器一样。

jest.mock(
  'react-lazyload',
  () =>
    function LazyLoad({ children }) {
      return <>{children}</>
    }
)

test('component wrapped with Lazyload', () => {
  const {screen} = render(< WrapperComponent />)
  expect(screen.getByText('Lazily loaded text!')).toBeInTheDocument()
})

赞(0）回复(0）举报 2022-12-08

qmb5sa222#

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

赞(0）回复(0）举报 2022-12-08

u4vypkhs3#

您可以使用forceVisible：

import { forceVisible } from 'react-lazyload';

it('Testing a component using react-lazyload', async () => {
  const screen = render(<WrapperComponent />)
  forceVisible();

  await waitFor(() => { 
    expect(screen.getByText('Lazily loaded text!')).toBeInTheDocument()
  });
});

赞(0）回复(0）举报 2022-12-08

我来回答

Jest.js 在React测试库中测试react-lazyload

3条答案

相关问题

热门标签

最新问答