Jest.js React测试库覆盖延迟加载

r3i60tvu 于 2022-12-08 发布在 Jest

关注(0)|答案(1)|浏览(132)

如何在react测试库中覆盖延迟加载组件。

import React, {lazy} from 'react';
const ownerInfo = lazy(() => import('../abc'))

const compone = () => {
  return <Suspense><abc /></Suspense>
}
export default compone

test.spec.js

import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
 import configureStore from 'redux-mock-store'

 ...

jestjs

来源：https://stackoverflow.com/questions/66667827/react-testing-library-to-cover-the-lazy-load

1条答案

按热度按时间

baubqpgj1#

看完视频后，我能够弄清楚如何覆盖懒惰加载。让我们假设你有懒惰加载组件。
LazyLoad.jsx：

import React, {lazy} from 'react'
const LazyComponent = lazy(() => import('./LazyComponent'))
const LazyLoad = () => {
   return (
      <div>
         <div> Lazy component is here: </div>
         <React.Suspense fallback={null}>
             <LazyComponent />
         </React.Suspense>
      </div>
   )
}
export default LazyLoad

LazyComponent.jsx：

import React from 'react'
export default () => <div>I am lazy ! </div>

LazyLoad.spec.jsx：

import React from 'react'
import {render, waitFor } from 'react-testing-library'
import LazyLoad from 'LazyLoad'

test('renders lazy component', async () => {
    const { getByText } = render(<LazyLoad />)
    await waitFor(() => expect(getByText('I am lazy !' )).toBeInTheDocument())
})

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

我来回答

Jest.js React测试库覆盖延迟加载

1条答案

相关问题

热门标签

最新问答