Estoy tratando de probar mi componente inicializado perezoso, hecho con react-lazy-load-image-component usando JestJS. A continuación están mis pruebas:
const viewModel = new VehicleViewModel(vehicleData, {}); const mockOnClick = jest.fn(); const mockStore = configureStore(); let store: MockStore; beforeEach(() => { jest.clearAllMocks(); store = mockStore(storeInitialState); }); describe('on component initialization', () => { it('renders', () => { const { container } = render( <Provider store={store}> <SearchResult vehicle={viewModel} onClick={mockOnClick} /> </Provider> ); expect(container).toMatchSnapshot(); }); }); describe('when the user clicks on the result', () => { it('processes an onClick event', () => { const { container, getByTestId } = render( <Provider store={store}> <SearchResult vehicle={viewModel} onClick={mockOnClick} /> </Provider> ); await waitFor(() => { fireEvent.click(getByTestId('search-result')); }); expect(container).toMatchSnapshot(); expect(mockOnClick).toBeCalled(); }); });El componente está codificado como:
const SearchResult = ({ onClick, vehicle }: SearchResultProps): JSX.Element => { const { images, make, model, year, dealerName, city, state, timeOnMarket, mileage, price, } = vehicle; const monthlyPayment = useMonthlyPayment(price); return ( <div className="search-result" data-testid="search-result" onClick={onClick}> <style jsx>{styles}</style> <div className="main-image" // replace multiple spaces, if any, with one title={`${year || ''} ${make || ''} ${model || ''} image`.replace(/ +/g, ' ')} > <Carousel images={images} year={year} make={make} model={model} /> ... </div> ); }; Mientras que el render <Carousel /> se define como:
return ( <LazyLoadComponent> <div className="carousel-container" onMouseEnter={handleMouseEnterEvent} onMouseLeave={handleMouseLeaveEvent} > ... </div> </LazyLoadComponent> );Sin carga diferida, mis pruebas funcionan bien.
Contenedor con carga diferida, mis pruebas fallan con: TypeError: Cannot read property 'prototype' of undefined . El error ocurre en const { container } = render(... . Traté de simular el efecto de desplazamiento. No funcionó para mí, todavía.
¿Cómo agrego cobertura de broma a los componentes usando la carga diferida en el interior?
Terminé haciendo lo siguiente dentro del código real:
const TestLasyWrapper = ({ children }: any) => process.env.NODE_ENV !== 'test' ? <LazyLoadComponent>{children}</LazyLoadComponent> : <>{children}</>;Tiene que 'esperar' a que su componente se cargue, monte y renderice. ¿Está utilizando React Testing Library con Jest? Si es así, puede usar waitFor , que sondeará hasta que el elemento se agregue al DOM.
await waitFor(() => expect(screen.findByText('Foo')).toBeInTheDocument());